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

Question

in my Vue component I have checkboxes with array of items set to checkbox value:

<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>

My object groups is array of arrays looks like this:

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

So in template item is represented by array. My goals is when I check checkbox, to model selected will append flat array so for example when I check both checkboxes generated in loop, I will got in my selected 4 objects instead of 2 arrays of objects. (selected will [{id: 1, ...}, {id: 2, ...}, {id: 5, ...}, {id: 8, ...}] )

It also should works when some checkbox is unchecked. For example when I uncheck first checkbox, I will got in selected items of second checkbox instead of array. (selected will [{id: 5, ...}, {id: 8, ...}] )

I need that because I need check or uncheck whole group of checkboxes.

Is possible do that in Vue? I didn't find anything about it in docs. Thanks.

Answer 1

You can create a computed property that takes selected and returns the flattened array, so for example have the computed property flatSelected:

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

Then in your template have the following

<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>