[Vuejs]-Mutiple checkboxes, bound to the same Array in Vue JS

by

3👍

✅

You made a few wrong assumptions in your code (mainly in respect to the scope).

You have your selected array in your main instance, instead of the demo-grid component, where you have your checkboxes:

var demo = new Vue({
    el: '#demo',
    data: {
        searchQuery: '',
        gridColumns: ['name', 'power'],
        gridData: [
            {name: 'Chuck Norris', power: Infinity},
            {name: 'Bruce Lee', power: 9000},
            {name: 'Jackie Chan', power: 7000},
            {name: 'Jet Li', power: 8000}
        ],
        selected: [] // <- This one
    }
})

And there is no selectAll method defined on your demo-grid component either, even though you reference it in your template:

<input @click="selectAll" type="checkbox" v-model="selected" id="{{ entry.name }}" value="{{ entry.name }}"></td>

If you thus pass your selected property into your demo-grid, (and define it in the props), you should be fine:

        <demo-grid
            v-bind:data="gridData"
            v-bind:columns="gridColumns"
            v-bind:filter-key="searchQuery"
            v-bind:selected="selected"> <!-- here -->
        </demo-grid>

And define a selectAll method:

methods: {
    ...
    selectAll: function () {
       ...
    }

Here you can see a working example:
https://jsfiddle.net/7fqgavvq/3/

👤nils

1👍

You should add the selected key to the component’s data, not to the main instance of vue.

https://jsfiddle.net/7fqgavvq/4/

👤Pantelis Peslis

Leave a comment