My Vue component includes checkboxes that have an array of items as their 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>
The 'groups' object is an array of arrays structured like this:
let groups = [
[
{id:1, foo1: '...', foo2: '...'},
{id:2, foo1: '...', foo2: '...'}
],
[
{id:5, foo1: '...', foo2: '...'},
{id:8, foo1: '...', foo2: '...'}
],
];
Each 'item' in the template represents an array. The objective is to append a flat array to the 'selected' model when checkboxes are checked. For example, selecting both dynamically generated checkboxes should result in the 'selected' model containing 4 objects instead of 2 arrays of objects (selected will be
[{id: 1, ...}, {id: 2, ...}, {id: 5, ...}, {id: 8, ...}]This functionality should also work when any checkboxes are unchecked. If the first checkbox is unchecked, the 'selected' model should only include the items from the second checkbox (selected will be [{id: 5, ...}, {id: 8, ...}]).
This feature is necessary for managing the selection and deselection of entire groups of checkboxes.
Is it possible to achieve this behavior in Vue? I haven't found any documentation on this specific scenario. Thank you.