Vuetify 复选框数组在列表更改时检查所有框

Question

我对 vue 和 vuetify 都很陌生，所以我的代码中可能有几行可怕的代码，但我真的在这方面苦苦挣扎，如果能得到一些帮助会很好。

我在“items”数组上使用 v-for 循环生成了一组复选框。这个复选框数组附加到模型数组，就像 vuetify 文档中的 this example 一样。

它看起来像下面的代码。

问题是：如果我更改 items 数组，即使模型数组仍然为空，所有复选框最终都会被选中。

这是我的模板：

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

和脚本

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: {
    comparator(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"
        }
      ]
    }
   }
});

还有一个codepen is way easier to understand

我已经在这个问题上苦苦挣扎了一段时间，如果你有任何想法，那将是受欢迎的。谢谢！

编辑：我的代码出错了。修复。问题还是一样。

Answer 1

这段代码的bug很少，

从下面的复选框

<v-checkbox 
  v-model="model" :label="item.name"  
  :value="item" 
  :value-comparator="comparator"
></v-checkbox>

:value-comarator 是当你点击复选框时触发的，它会尝试 与所有其他值匹配并仅对选定的 id 返回 true

“比较器”功能在您的方法中不可用，将“valueCompare”方法替换为“比较器”

当您单击更改元素时，它会重置项目数组，但您不会重置模型

工作代码笔：https://codepen.io/chansv/pen/rNNyBgQ

添加的修复和最终代码如下所示

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

// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe

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: {
    comparator(a, b) {
      console.log(a, b);
      return a.id == b.id;
    },
       updateItems() {
         this.model = [];
            this.items = [
        {
          id: 1,
          name: "Element1"
        },
        {
          id: 2,
          name: "Element2"
        },
        {
          id: 3,
          name: "Element3"
        },
        {
          id: 4,
          name: "Element4"
        }
      ]
    }
   }
});