Vuetify checkboxes array checks all boxes when list changes Vuetify checkboxes array checks all boxes when list changes vue.js vue.js

Vuetify checkboxes array checks all boxes when list changes


There are few bugs in this code,

from the below checkbox

<v-checkbox   v-model="model" :label="item.name"    :value="item"   :value-comparator="comparator"></v-checkbox>

:value-comparator is triggers when you click on checkbox, it tries to match with all other value and returns true only for the selected id

"comparator" function is not available in your methods, replace "valueCompare" method with "comparator"

when you click on change elements, it resets items array but you are not reseting the model

working codepen : https://codepen.io/chansv/pen/rNNyBgQ

Added fixs and final code looks like this

<div id="app">  <v-app>    <v-content>      <v-container>        <div>          <v-list>            <v-list-item                          v-for="item in items"                            :key="item.id"             >           <v-checkbox v-model="model"              :label="item.name"               :value="item"         :value-comparator="comparator"           ></v-checkbox>            </v-list-item>          </v-list>          <v-btn @click="updateItems">Change elements</v-btn>        </div>      </v-container>    </v-content>  </v-app></div>// Looking for the v1.5 template?// https://codepen.io/johnjleider/pen/GVoaNenew Vue({  el: "#app",  vuetify: new Vuetify(),  data() {    return {      model: [],      items: [        {          id: 1,          name: "Item1"        },        {          id: 2,          name: "Item2"        },        {          id: 3,          name: "Item3"        },        {          id: 4,          name: "Item4"        }      ]    };  },   methods: {    comparator(a, b) {      console.log(a, b);      return a.id == b.id;    },       updateItems() {         this.model = [];            this.items = [        {          id: 1,          name: "Element1"        },        {          id: 2,          name: "Element2"        },        {          id: 3,          name: "Element3"        },        {          id: 4,          name: "Element4"        }      ]    }   }});