时间戳

首页 > 解决方案 > Vuetify v-checkbox - 选择没有正确更新

vue.js - Vuetify v-checkbox - 选择没有正确更新

问题描述

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

当我修改单个法官的选择时，更新选择工作正常，但是当我更改多个法官的选择时会出现问题。

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

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

解决方案

我认为有些电线交叉传递了整个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。

你的 codepen 的叉子在这里。

推荐阅读