首页 文章

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

提问于
浏览 次
0

在我的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中没有找到任何关于它的内容 . 谢谢 .

javascript arrays checkbox vue.js vuejs2

1 回答

  • 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>
    回复于

相关问题