javascript - 通过VueJS中的多个复选框将平面数组添加到v模型

Question

在我的 Vue 组件中，我有一些复选框，其中的项目数组设置为复选框值:

<div v-for="group in groups">

   <input type="checkbox" v-model="selected" :value="group">       

   <template v-for="item in group">
      <input type="checkbox" :value="item" v-model="selected">
   </template>
</div>

我的对象组是数组的数组，如下所示:

let groups = [
  [
    {id:1, foo1: '...', foo2: '...'}, 
    {id:2, foo1: '...', foo2: '...'}
  ], 
  [
    {id:5, foo1: '...', foo2: '...'}, 
    {id:8, foo1: '...', foo2: '...'}
  ],
];

因此在模板中item由数组表示。我的目标是当我选中复选框时，模型 selected 将附加平面数组，因此例如当我选中循环中生成的两个复选框时，我将得到我的 selected 4 个对象2 个对象数组。 (选择将[{id: 1, ...}, {id: 2, ...}, {id: 5, ...}, {id: 8, ...}] )

当某些复选框未被选中时，它也应该起作用。例如，当我取消选中第一个复选框时，我将进入第二个复选框的选定项目而不是数组。 (选择将 [{id: 5, ...}, {id: 8, ...}] )

我需要它，因为我需要选中或取消选中整组复选框。

可以在 Vue 中做到这一点吗？我在文档中没有找到任何有关它的信息。谢谢。

Answer 1

您可以创建一个计算属性，该属性接受选定内容并返回展平数组，例如计算属性 flatSelected:

export default {
    ...,
    computed: {
        flatSelected () {
            return this.selected.reduce((acc, cur) => [ ...acc, ...cur ], [])
        }
    }
}

然后在您的模板中有以下内容

<template>
   <input v-for="item in itemsGroup" type="checkbox" :value="item" v-model="selected">
   <input v-for="item in flatSelected" type="checkbox" :value="item" v-model="flatSelected">
</template>