如果单击框列表，如何添加选择的按钮？
Posted
技术标签:
【中文标题】如果单击框列表，如何添加选择的按钮？【英文标题】：How can I add button selected if clicked on the box list? 【发布时间】：2019-03-05 02:27:34 【问题描述】：我从这里得到参考：
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-
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[] 中，以便它们对每个项目都是唯一的：
// 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>
...但我认为items[] 的形状无法更改。另一种方法是创建oriPress 和kwPress 属性的映射（每个项目一个）。这可以通过 items[] 上的 watcher 来完成，将 oriPress 和 kwPress 分别初始化为项目 ID 到布尔值的映射：
// 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-
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>【讨论】：
太棒了。但我想问。当原始按钮处于活动状态，kw按钮处于非活动状态时，它可以在一个框中吗？反之亦然items[]的形状可以改变。所以我可以在 items 数组中添加键 oriPress 和 kwPress。
我不明白你关于“它在一个盒子里”的问题。什么意思？
我的意思是在每个框中，如果点击了原始按钮，则原始按钮处于活动状态，而 kw 按钮则处于非活动状态。如果点击kw按钮，kw按钮是活动的，原来的按钮是不活动的
哦，我明白了。这将使用button style radios 实现，这需要与您现有的解决方案不同的解决方案。以上是关于如果单击框列表，如何添加选择的按钮？的主要内容，如果未能解决你的问题，请参考以下文章