Question

我正在尝试构建一个包含多个复选框的面板，以允许用户对其购物车的总价格应用折扣。

要做到这一点，我使用的是一个计算函数，它使用复选框选择总数和折扣之间的差异。

有时会发生不同的商品在复选框中具有相同的价值，当我点击其中一个商品时，都会检查它们。

我做错了什么？

这里是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
        },
    ]
}
});

Find here the implementation on codepen

Answer 1

你应该使用完整对象作为input元素的值并使用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
            },
        ]
    }
});

codepen

Answer 2

或者您可以调用方法来更新绑定。虽然为此你需要编写更多代码。以下是链接和代码，

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));
                }
            }
    }
});

Vue js复选框具有相同的值

2 个答案: