, что потребует другого решения, чем то, что у вас есть.

учаю ссылку здесь:

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

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

Мой Vue компонент, как это:

<template>
    ...
        <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" variant="outline-primary">Original</b-button>
                        <b-button :pressed.sync="kwPress" variant="outline-primary">Kw</b-button>
                    </b-button-group>
                    <b-btn variant="primary" block>Add</b-btn>
                </div>
            </b-card>
        </b-card-group>
    ....
</template>

<script>
    export default {
        ..
        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: true,
                kwPress: false
            }
        },
        mounted: function () {
            this.getItems()
        },
        computed: {
            formattedItems() {
                return this.items.reduce((c, n, i) => {
                    if (i % 4 === 0) c.push([]);
                    c[c.length - 1].push(n);
                    return c;
                }, []);
            }
        }
    }
</script>

Если скрипт выполнен, кнопка-оригинал во всех окнах активна, а кнопка kw во всех ящиках неактивна

Это то, что я ожидал. Но моя проблема в том, что когда я нажимаю кнопку kw или оригинальную кнопку, все кнопки активны или неактивны. Я хочу, чтобы он был активен только на кнопке, выбранной на каждом поле

Например, есть 10 коробок. Когда я нажимаю исходную кнопку в третьем поле, исходная кнопка в третьем поле будет активной, а кнопка kw будет неактивной. Когда я нажимаю кнопку kw в девятом поле, кнопка kw в девятом поле будет активной, а кнопка оригинала будет неактивной. Как и остальные

Как я могу это сделать?