Vue js checkbox with same values

Question

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:

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

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

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

Answer 2

you shoud use the full object as value for the input element and use the price property.

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