mardi 22 octobre 2019

Vuetify checkboxes array checks all boxes when list changes

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: {
    valueCompare(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 !




Aucun commentaire:

Enregistrer un commentaire