How can I add button selected if clicked on the box list?

Question

I get reference from here :

https://bootstrap-vue.js.org/docs/components/card/#card-groups

https://bootstrap-vue.js.org/docs/components/button/#pressed-state-and

Answer 1

The problem is the same oriPress and kwPress data properties are used for all items. You could move those properties into items[] so that they're unique to each item:

// script
data() {
  return {
    items: [
      {id: 1, oriPress: true, kwPress: false, ...},
      {id: 2, oriPress: true, kwPress: false, ...},
    ]
  }
}

//template

  

      Original
      Kw

  

...but I assume the shape of items[] cannot be changed. The alternative is to create a map of oriPress and kwPress properties (one per item). This could be done with a watcher on items[] that initializes oriPress and kwPress each to a map of item IDs to Booleans:

// script
data() {
  return {
    items: [...],
    oriPress: {},
    kwPress: {},
  }
},
watch: {
  items: {
    immediate: true,
    handler(value) {
      this.oriPress = value.reduce((p,c) => {
        p[c.id] = true;
        return p;
      }, {});

      this.kwPress = value.reduce((p,c) => {
        p[c.id] = false;
        return p;
      }, {});
    }
  }
},


//template

  

      Original
      Kw

  

new Vue({
  el: '#app',
  data() {
    return{
      items: [
        {id:1, title:'chelsea', price:900, country: 'england'},
        {id:2, title:'liverpool', price:800, country: 'england'},
        {id:3, title:'mu', price:700, country: 'england'},
        {id:4, title:'city', price:600, country: 'england'},
        {id:5, title:'arsenal', price:500, country: 'england'},
        {id:6, title:'tottenham', price:400, country: 'england'},
        {id:7, title:'juventus', price:300, country: 'italy'},
        {id:8, title:'madrid', price:200, country: 'span'},
        {id:9, title:'barcelona', price:100, country: 'span'},
        {id:10, title:'psg', price:50, country: 'france'}
      ],
      oriPress: {},
      kwPress: {}
    }
  },
  watch: {
    items: {
      immediate: true,
      handler(value) {
        this.oriPress = value.reduce((p,c) => {
          p[c.id] = true;
          return p;
        }, {});
        this.kwPress = value.reduce((p,c) => {
          p[c.id] = false;
          return p;
        }, {});
      }
    }
  },
  computed: {
    formattedItems() {
      return this.items.reduce((c, n, i) => {
        if (i % 4 === 0) c.push([]);
        c[c.length - 1].push(n);
        return c;
      }, []);
    }
  }
})

  
    
      

        {{item.price}}
      
      

        {{item.country}}
      
      

        
          Original
          Kw
        
        Add