复选框呈现为false，但data和DOM属性为true

Question

我想创建一个复选框组组件。当前没有本机解决方案，因此我尝试自行创建一个解决方案

<template>
  <v-container fluid>
    <v-checkbox
      v-for="(groupItem, index) in groupItems"
      :key="index"
      :label="groupItem.display"
      :value="groupItem.value"
      @change="onCheckboxUpdated(index)"
    ></v-checkbox>
  </v-container>
</template>

<script>
export default {
  props: {
    groupItems: {
      type: Array,
      required: true
    }
  },
  methods: {
    onCheckboxUpdated: function(index) {
      this.groupItems[index].value = !this.groupItems[index].value;
      this.$emit("checkboxGroupUpdated", this.groupItems);
    }
  }
};
</script>

此组件应呈现特定数量的复选框，并使用所有更新后的值触发事件。

当我传递这些值时

    values: [
      {
        display: "Read permissions",
        value: true
      },
      {
        display: "Write permissions",
        value: false
      },
      {
        display: "Delete permissions",
        value: false
      }
    ]

尽管DOM元素设置为true，第一个生成的复选框仍呈现false状态

切换复选框时，下次可以正常使用。

我创建了一个示例来重现该问题

https://codesandbox.io/s/checkboxgroup-l8gcg

Answer 1

这是因为Vue.js忽略了输入的value。您需要改用v-model。

<v-checkbox
  v-for="(groupItem, index) in groupItems"
  :key="index"
  :label="groupItem.display"
  v-model="groupItem.value"
  @change="onCheckboxUpdated(index)"
></v-checkbox>

摘自文档https://vuejs.org/v2/guide/forms.html

  

v-model将忽略在任何表单元素上找到的初始值，已检查或选定的属性。它将始终将Vue实例数据视为事实的来源。您应该在JavaScript端的组件的data选项中声明初始值。

Answer 2

如果要扩展v-model的{​​{1}}，则需要使用v-checkbox作为支持，而不是input-value。

value

请参阅：

https://github.com/vuetifyjs/vuetify/blob/27d5fdd32dc7c8a9af38f823d1574d92b211d405/packages/vuetify/src/mixins/selectable.js#L14

这是:input-value="groupItem.value" 中包含的mixin。

虽然v-checkbox被记录为https://vuetifyjs.com/en/components/selection-controls#api，但您确实需要花点时间才能找到它。

与您的问题无关，您当前对复选框组的实现违反了单向数据流。您正在变异通过道具传递的对象。

https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

我将由您决定是否在乎。