Add flat array to v-model by multiple checkboxes in VueJS

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.

gillyhl · Accepted Answer · 2018-04-05 14:00:33Z

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>

edited Apr 5, 2018 at 14:00

answered Apr 5, 2018 at 13:09

gillyhl

4752 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bill Criswell Over a year ago

I was just about to paste this exact answer from my text editor. =(

Denis Stephanov Over a year ago

@gillyhl thanks for answer, but where to use this property?

gillyhl Over a year ago

Check my updated answer, if you export your Vue component like that, it'll be like the answer, add a property called computed in the export, and define the computed property you want. See the docs for a better explaination vuejs.org/v2/guide/computed.html

Denis Stephanov Over a year ago

@gillyhl Thanks but I know how to use computed properties, but I don't know where to use this flatSelected. I need hold updated selected field because I also have checkboxes which has values as single object not array of objects

gillyhl Over a year ago

Updated answer, I think this is what you need.

|

Collectives™ on Stack Overflow

Add flat array to v-model by multiple checkboxes in VueJS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related