Question

我从法官列表中动态生成复选框网格，每个法官都获得了一个用于测试列表的复选框。

当我修改单个法官的选择时，更新选择的效果很好，但是当我更改多个法官的选择时，就会出现问题。

此外，选中几乎所有复选框都会使其他法官的选择混乱。

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' }] }
      ]
    }
  },
})

Codepen：https://codepen.io/Agathe02515/pen/GRgJygz

Answer 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.id的列表保存到每个法官中就可以简化事情，并使您更清楚地推断v-model的逻辑。

代码笔here的叉子。

Vuetify v复选框-选项未正确更新

1 个答案: