[Vuejs]-Mutating a value in vue when the key didn't previously exist does not update the view

by

1👍

✅

You should be using Vue.set to update the value of the selected property on your objects in order to be reactive, like this:

import Vue from 'vue';
...
toggleSelect: function () {
    this.someData.forEach(element => {
        Vue.set(element, 'selected', !element.selected);
    });
}
👤David Porcel

2👍

Try this idea,

in vue component. 

<input type="checkbox" v-model="selectAll"> Select All
   <tr v-for="item in someData" :key="item.name">
      <td>
         <input type="checkbox" v-model="selected" :value="item.name">
      </td>
   {{ item.name }}
</tr>

script: 

data() {
        return {
            selectAll: false,
            selected: [],
            someData: [{ name: "john" }, { name: "kate" }, { name: "aaron" }]
        };
    },
    watch: {
        selectAll(value) {

            // validate if value is true
            if (value) {
                this.someData.forEach(item => {
                   // push unique value
                   if(this.items.indexOf(item.name) === -1) {
                       this.selected.push(item.name);
                   }
                });
            } else {
                // Unselect all
                this.selected = [];
            }
        }
    }

You have a selected variable where the selected Items are located. selectAll variable to select all items and push to selected variable.

👤Kenneth

Leave a comment