[Vuejs]-Vuetify v-checkbox – selections not updating correctly

by

0👍

✅

I think some wires got crossed passing the entire test object as the value.

Here’s what I found works:

...
      <v-row v-for="judge in judges">
        <v-col cols="3">
          {{ judge.name }} - {{ judge.tests }}
        </v-col>
        <v-col cols="3" v-for="test, idx in tests">
          <v-checkbox v-model="judge.tests" :value="test.id">
        </v-col>
      </v-row>
...
</div>

The data for judges starting out is this:

      judges: [
        { id: 0, name: 'judge name 1', tests: [0, 1] },
        { id: 1, name: 'judge name 2', tests: [0]},
        { id: 2, name: 'judge name 3', tests: [0, 2] }
      ]

Saving only the list of selected test.ids to each judge simplifies things, and lets you reason more clearly about the logic of v-model.

Fork of your codepen here.

Leave a comment