[英]Vue js checkbox with same values
I am trying to build a panel with multiple checkboxes to allow users to apply discounts to the total price of their cart. 我正在尝试建立一个带有多个复选框的面板,以允许用户将折扣应用于购物车的总价。
To do this i am using a computed function that makes the difference between the total and the discount selected with the checkbox. 为此,我使用的是计算功能,该功能使总金额与使用复选框选择的折扣之间存在差异。
Sometimes happens that different offer have same value in the checkbox and when i click on one both of them are checked. 有时会发生不同的要约在复选框中具有相同的值,并且当我单击它们两者时都被选中的情况。
What i am doing wrong? 我做错了什么?
Here the javascript: 这里的JavaScript:
const app = new Vue({
el: '#app',
computed: {
total() {
return this.fullPrice.reduce( (sum, addon) => sum - addon, 10000);
}
},
data: {
fullPrice: [],
currency: '€',
offers: [
{
id: 'children',
text: 'Discount for children',
price: 500
},
{
id: 'senior',
text: 'Discount for senior',
price: 100
},
{
id: 'special',
text: 'Special voucher',
price: 100
},
]
}
});
you shoud use the full object as value for the input element and use the price property. 您应该将完整对象用作输入元素的值,并使用price属性。
const app = new Vue({
el: '#app',
computed: {
total() {
return this.fullPrice.reduce( (sum, addon) => sum - addon.price, 10000);
}
},
data: {
fullPrice: [],
currency: '€',
offers: [
{
id: 'children',
text: 'Discount for children',
price: 500
},
{
id: 'senior',
text: 'Discount for senior',
price: 100
},
{
id: 'special',
text: 'Special voucher',
price: 100
},
]
}
});
Or alternatively you can call a method to update your bindings. 或者,您可以调用一个方法来更新绑定。 Though for this you will have to code a bit more. 尽管为此,您将不得不编写更多代码。 Following is the link and code, 以下是链接和代码,
https://codepen.io/anon/pen/dVNWNE https://codepen.io/anon/pen/dVNWNE
<div id="app">
<h1>Choose your discount</h1>
<ul>
<li v-for="offer in offers" track-by="$index">
<label>
<span>{{offer.text}} {{offer.price}}{{currency}}</span>
<input type="checkbox" :id="offer.id" :value="offer.price" v-on:input="updateVals($event.target.value)">
</label>
</li>
</ul>
<p>Total price {{total}}{{currency}}</p>
</div>
const app = new Vue({
el: '#app',
computed: {
total() {
return this.fullPrice.reduce( (sum, addon) => sum - addon, 10000);
}
},
data: {
fullPrice: [],
currency: '€',
offers: [
{
id: 'children',
text: 'Discount for children',
price: 500,
},
{
id: 'senior',
text: 'Discount for senior',
price: 100,
},
{
id: 'special',
text: 'Special voucher',
price: 100,
},
]
},
methods: {
updateVals(val) {
if(this.fullPrice.indexOf(val) === -1){
this.fullPrice.push(parseInt(val, 10));
}
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.