Vuetify checkboxes array checks all boxes when list changes

Question

I'm pretty new to both vue and vuetify so there might be a few horrible lines in my code, but I'm really struggling with this one and a bit of help would be nice.

I have an array of checkboxes generated with a v-for loop on an "items" array. This array of checkboxes is attached to a model array just like this example from the vuetify documentation.

It looks like the code below.

The problem is : if I change the items array, even when the model array is still empty, all checkboxes end up checked.

Here is my template :

<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>

and the script

new 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) {
      return a.id == b.id;
    },
       updateItems() {
            this.items = [
        {
          id: 1,
          name: "Element1"
        },
        {
          id: 2,
          name: "Element2"
        },
        {
          id: 3,
          name: "Element3"
        },
        {
          id: 4,
          name: "Element4"
        }
      ]
    }
   }
});

And a codepen is way easier to understand

I've been struggling with this issue for a while now, if you have any idea, that would be welcome. Thank you !

EDIT : I had made a mistake in my code. Fixed it. The question is still the same though.

Answer 1

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/GVoaNe

new 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"
        }
      ]
    }
   }
});