我从这里得到了参考:
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将处于活动状态,按钮原稿将处于非活动状态 . 其他人也一样
我该怎么做?
1 回答
问题是
oriPress
和kwPress
数据属性用于所有项目 . 您可以将这些属性移动到items[]
中,以便它们对每个项目都是唯一的:...但我认为
items[]
的形状无法改变 . 另一种方法是创建oriPress
和kwPress
属性的 Map (每个项目一个) . 这可以通过watcher在items[]
上完成,它将oriPress
和kwPress
各自初始化为项目ID到布尔值的 Map :