jeudi 5 avril 2018

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

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

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

My object itemsGroups is array of arrays looks like this:

let itemsGroups = [
  [
    {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, ...}] )

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




Aucun commentaire:

Enregistrer un commentaire