复选框呈现假，但数据和 DOM 属性为真答案

【问题标题】：Checkbox renders false but the data and DOM attribute is true复选框呈现假，但数据和 DOM 属性为真
【发布时间】：2019-07-02 14:49:25
【问题描述】：

我想创建一个复选框组组件。目前没有原生解决方案，所以我尝试自己创建一个

<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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

如果你想扩展 v-checkbox 的 v-model，你需要使用 input-value 作为 prop 而不是 value。

:input-value="groupItem.value"

见：

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

这是一个包含在 v-checkbox 中的 mixin。

虽然 input-value 已记录在案，但 https://vuetifyjs.com/en/components/selection-controls#api 确实需要挖掘一下才能找到它。

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

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

我会让你决定是否在乎。

【讨论】：

【解决方案2】：

这是因为 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 选项中。

【讨论】：