Javascript 从对象数组中预选Vuetify列表项组中的复选框

我试图在

v-list-item-group

中预选复选框，但我一辈子都无法弄清楚

true value

应该设置为什么才能选中复选框

我还尝试将

true value

的值更改为

column.value

，但没有成功

与我发现的大多数示例相反，这个

v-list-item-group

的模型是一个对象数组，而不是似乎是标准的原语

在提供的代码片段示例中（很抱歉，无法使其在沙箱中运行），应预选“第2列”

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
默认列：[{
值：“column1”，
文本：“第1列”，
},
{
值：“column2”，
文本：“第2列”，
},
{
值：“column3”，
正文：“第3栏”
},
],
所选列：[{
值：“column2”，
文本：“第2列”，
}],
}),
});

选择列
{{column.text}
使用v-model进入v-checkbox，而不是切换或单击，为v-model分配一个布尔值，该复选框将自动选中/取消选中，如vuetify文档所示：

<v-checkbox
      v-model="checkbox"
      :label="`Checkbox 1: ${checkbox.toString()}`"
    ></v-checkbox>
.
..
...
<script>
  export default {
    data () {
      return {
        checkbox: true,
        radioGroup: 1,
        switch1: true,
      }
    },
  }
</script>

使用v-model进入v-checkbox，而不是切换或单击，为v-model指定一个布尔值，该复选框将自动选中/取消选中，如vuetify docs所示：

<v-checkbox
      v-model="checkbox"
      :label="`Checkbox 1: ${checkbox.toString()}`"
    ></v-checkbox>
.
..
...
<script>
  export default {
    data () {
      return {
        checkbox: true,
        radioGroup: 1,
        switch1: true,
      }
    },
  }
</script>

当获取一个值时，我将一个对象映射到字符串，当设置时，通过与默认值进行比较，重新组装到一个对象，最终实现了这一点

简化示例，因为原始代码不幸是专有的：

selectedColumns: {
  get() {
    // Transform objects into strings as it appears to be the only way we
    // can accurately compare values in `v-list-item-group`
    return this.selectedColumns.map(
      (column) => column.value
    )
  },

  set(value) {
    // Transform back into objects by finding the matching column objects
    // in the default set of columns
    const columns = this.defaultColumns.filter(
      (column) => value.includes(column.value)
    )

    // Do something with `columns`. In my case I'm saving it to a store.
  }
}

当获取一个值时，我将一个对象映射到字符串，当设置时，通过与默认值进行比较，重新组装到一个对象，最终实现了这一点

简化示例，因为原始代码不幸是专有的：

selectedColumns: {
  get() {
    // Transform objects into strings as it appears to be the only way we
    // can accurately compare values in `v-list-item-group`
    return this.selectedColumns.map(
      (column) => column.value
    )
  },

  set(value) {
    // Transform back into objects by finding the matching column objects
    // in the default set of columns
    const columns = this.defaultColumns.filter(
      (column) => value.includes(column.value)
    )

    // Do something with `columns`. In my case I'm saving it to a store.
  }
}

不幸的是，在
v-model
中使用非数据属性将导致：
vue/valid-v-model:“v-model”指令需要与LHS一样有效的属性值。
不幸的是，在
v-model
中使用非数据属性将导致：
vue/valid-v-model:“v-model”指令需要与LHS一样有效的属性值与LHS一样有效。
vuetify组件的文档很糟糕。“你用过吗？”尼古拉斯惊奇地说，是的。在花了大量的时间四处挖掘，却什么也没找到之后，我最终在我刚刚发布的答案中找到了这种方法。我希望它能有所帮助，而且Vuetify改进了他们的文档。Vuetify组件的文档很糟糕。“你用过吗？”尼古拉斯惊奇地说，是的。在花了大量的时间四处挖掘，却什么也没找到之后，我最终在我刚刚发布的答案中找到了这种方法。我希望这会有所帮助，而且Vuetify会改进他们的文档。