, что потребует другого решения, чем то, что у вас есть.
учаю ссылку здесь:
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 в девятом поле будет активной, а кнопка оригинала будет неактивной. Как и остальные
Как я могу это сделать?