Vuetify v-checkbox - 选择没有正确更新答案

【问题标题】：Vuetify v-checkbox - selections not updating correctlyVuetify v-checkbox - 选择没有正确更新
【发布时间】：2020-03-30 12:29:22
【问题描述】：

我从一个评委列表中动态生成一个复选框网格，每个评委都有一个用于测试列表的复选框。

当我修改一位评委的选择时，更新选择可以正常工作，但当我更改多个评委的选择时就会出现问题。

此外，选中几乎任何方框都会打乱所有其他评委的选择。

HTML：

<v-container fluid>
      <v-row>
        <v-col cols="3">
          tests per judges
        </v-col>
        <v-col cols="3" v-for="test in tests">
          {{ test.name }}
        </v-col>
      </v-row>
      <v-row v-for="judge in judges">
        <v-col cols="3">
          {{ judge.name }} - {{ judge.tests.map(t => t.id)}}
        </v-col>
        <v-col cols="3" v-for="test in tests">
          <v-checkbox v-model="judge.tests" :value="{id: test.id, reference: test.reference}"/>
        </v-col>
      </v-row>
      <p v-for="judge in judges">
        {{ judge }}
      </p>
</v-container>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      tests: [
        {id: 0, name: "test 0", reference: 'T25F'},
        {id: 1, name: "test 1", reference: 'T26F'},
        {id: 2, name: "test 2", reference: 'T27F'}
      ],
      judges: [
        { id: 0, name: 'judge name 1', tests: [{id: 0, reference:'T25F' }, {id: 1, reference: 'T26F'}] },
        { id: 1, name: 'judge name 2', tests: [{id: 0, reference:'T25F' }] },
        { id: 2, name: 'judge name 3', tests: [{id: 0, reference:'T25F' }, {id: 2, reference:'T27F' }] }
      ]
    }
  },
})

代码笔：https://codepen.io/Agathe02515/pen/GRgJygz

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我认为有些电线交叉传递了整个 test 对象作为值。

这是我发现的作品：

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

judges开始的数据是这样的：

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

仅将选定的test.ids 列表保存给每个评委可以简化事情，让您更清楚地推理v-model 的逻辑。

你的 codepen 的分支here。

【讨论】：