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, ...}]）

取消选中某个复选框时，它也应该有效。例如，当我取消选中第一个复选框时，我将获得第二个复选框的selected项而不是数组。（将选择[{id: 5, ...}, {id: 8, ...}]）

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

可以在Vue做到吗？我在docs中没有找到任何关于它的内容。感谢。

Answer 1

您可以创建一个采用selected的计算属性并返回展平数组，例如，让计算属性为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>

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

1 个答案: