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
<b-card-group v-for="row in formattedItems">
  <b-card v-for="item in row">

      <b-button :pressed.sync="item.oriPress">Original</b-button>
      <b-button :pressed.sync="item.kwPress">Kw</b-button>

  </b-card>
</b-card-group>

...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
<b-card-group v-for="row in formattedItems">
  <b-card v-for="item in row">

      <b-button :pressed.sync="oriPress[item.id]">Original</b-button>
      <b-button :pressed.sync="kwPress[item.id]">Kw</b-button>

  </b-card>
</b-card-group>

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;
      }, []);
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-card-group deck v-for="row in formattedItems">
    <b-card :title="item.title"
            img-src="http://placehold.it/140?text=No image"
            img-alt="Img"
            img-top
            v-for="item in row">
      <p class="card-text">
        {{item.price}}
      </p>
      <p class="card-text">
        {{item.country}}
      </p>
      <div slot="footer">
        <b-button-group size="sm">
          <b-button :pressed.sync="oriPress[item.id]" variant="outline-primary">Original</b-button>
          <b-button :pressed.sync="kwPress[item.id]" variant="outline-primary">Kw</b-button>
        </b-button-group>
        <b-btn variant="primary" block>Add</b-btn>
      </div>
    </b-card>
  </b-card-group>
</div>