如果单击框列表，如何添加选定的按钮? [英] How can I add button selected if clicked on the box list?
问题描述
我从这里得到参考:
https://bootstrap-vue.js.org/文档/组件/卡片/#card-groups
https://bootstrap-vue.js.org/docs/components/button/#pressed-state-and-toggling
我的 vue 组件是这样的:
...<b-card-groupdeck v-for="row in formattedItems"><b-card :title="item.title"img-src="http://placehold.it/140?text=无图片"img-alt="Img"img-topv-for="行中的项目"><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">原版</b-button><b-button :pressed.sync="kwPress" variant="outline-primary">Kw</b-button></b-button-group><b-btn variant="primary" block>添加</b-btn></b-card></b-card-group>....<脚本>导出默认{..数据 () {返回{项目: [{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，标题:'尤文图斯'，价格:300，国家:'意大利'}，{id:8, title:'madrid', price:200, country: 'span'},{id:9, title:'barcelona', price:100, country: 'span'},{id:10，标题:'psg'，价格:50，国家:'法国'}],oriPress:对，kwPress:假}},挂载:函数(){this.getItems()},计算:{格式化项目(){返回 this.items.reduce((c, n, i) => {if (i % 4 === 0) c.push([]);c[c.length - 1].push(n);返回 c;}, []);}}}
如果脚本执行，所有框内的按钮原件和所有框内的按钮kw都处于非活动状态
这正是我所期望的.但我的问题是当我单击 kw 按钮或原始按钮时，所有按钮都处于活动状态或非活动状态.我希望它只在每个框上选择的按钮上激活
例如有 10 个盒子盒子.当我单击第三个框中的原始按钮时，第三个框中的原始按钮将处于活动状态，而 kw 按钮将处于非活动状态.当我单击第九个框中的按钮 kw 时，第九个框中的按钮 kw 将处于活动状态，而原始按钮将处于非活动状态.其他人也一样
我该怎么做?
问题是所有项目都使用相同的 oriPress 和 kwPress 数据属性.您可以将这些属性移动到 items[] 中，以便它们对每个项目都是唯一的:
//脚本数据() {返回 {项目: [{id: 1, oriPress: true, kwPress: false, ...},{id: 2, oriPress: true, kwPress: false, ...},]}}//模板<b-card-group v-for="row in formattedItems"><b-card v-for="item in row"><b-button :pressed.sync="item.oriPress">原版</b-button><b-button :pressed.sync="item.kwPress">Kw</b-button></b-card></b-card-group>...但我假设 items[] 的形状不能改变.另一种方法是创建 oriPress 和 kwPress 属性的映射(每个项目一个).这可以通过 items[] 上的 watcher 来完成code> 将 oriPress 和 kwPress 分别初始化为项目 ID 到布尔值的映射:
//脚本数据() {返回 {项目: [...]，oriPress:{}，kwPress:{}，}},手表: {项目: {立即:真实，处理程序(值){this.oriPress = value.reduce((p,c) => {p[c.id] = 真；返回 p;}, {});this.kwPress = value.reduce((p,c) => {p[c.id] = 假；返回 p;}, {});}}},//模板<b-card-group v-for="row in formattedItems"><b-card v-for="item in row"><b-button :pressed.sync="oriPress[item.id]">原版</b-button><b-button :pressed.sync="kwPress[item.id]">Kw</b-button></b-card></b-card-group>new Vue({el: '#app',数据() {返回{项目: [{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，标题:'尤文图斯'，价格:300，国家:'意大利'}，{id:8, title:'madrid', price:200, country: 'span'},{id:9, title:'barcelona', price:100, country: 'span'},{id:10，标题:'psg'，价格:50，国家:'法国'}],oriPress:{}，kwPress:{}}},手表: {项目: {立即:真实，处理程序(值){this.oriPress = value.reduce((p,c) => {p[c.id] = 真；返回 p;}, {});this.kwPress = value.reduce((p,c) => {p[c.id] = 假；返回 p;}, {});}}},计算:{格式化项目(){返回 this.items.reduce((c, n, i) => {if (i % 4 === 0) c.push([]);c[c.length - 1].push(n);返回 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="应用程序"><b-card-groupdeck v-for="row in formattedItems"><b-card :title="item.title"img-src="http://placehold.it/140?text=无图片"img-alt="Img"img-topv-for="行中的项目"><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">原版</b-button><b-button :pressed.sync="kwPress[item.id]" variant="outline-primary">Kw</b-button></b-button-group><b-btn variant="primary" block>添加</b-btn></b-card></b-card-group>
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-toggling
My vue component like this :
<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>
If the script executed, button original in all box active and button kw in all box inactive
That is what I expected. But my problem is when I click the kw button or the original button, all buttons are active or inacive. I want it active only on the button selected on each box
For example there are 10 box boxes. When I click the original button in the third box, the original button in the third box will be active and the kw button will be inactive. When I click the button kw in the ninth box, the button kw in the ninth box will be active and the button original will be inactive. So do the others
How can I do it?
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>
这篇关于如果单击框列表，如何添加选定的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
