Check all checkboxes by default - vue.js

Question

So I have this checkbox group
b-form-checkbox-group.ml-4.b-check(
v-model="selected",
v-if="productGroup.show",
:options="productGroup.products",
I am trying to have the list of :options to be checked by default. I am having issues with settign this up.
Here is my code, I don't know why it is not working.
toggleAll(checked, productGroup) {
if (checked) {
let productIds = this.selected ? [...this.selected] : [];
productGroup.products.forEach((product) => {
productIds.push(product.id);
});
this.selected = _.uniq(productIds);
} else {
let temp = [...this.selected];
productGroup.products.forEach((product) => {
if (temp.indexOf(product.id) > -1) {
temp.splice(temp.indexOf(product.id), 1);
}
});
this.selected = temp;
}

Answer 1

Assume your option group is an array of object data, and you will use another array to track the selected options, as follows:
data() {
return {
selected1: [],
group1: [
{ id: 1, text: 'Item 1', value: 'item1' },
{ id: 2, text: 'Item 2', value: 'item2' }
]
}
}
Your toggleAll method needs to add all the group's values to the tracking array to toggle them on, and it needs to remove all values to toggle them off:
methods: {
toggleAll(checked, group, selected) {
// First remove any selected items, regardless of the toggle state
selected.splice(0, selected.length)
// Now, if the toggle is true, add all items
if (checked) {
group.forEach(o => selected.push(o.value));
}
}
}
Using the example data above, call the above method like:
this.toggleAll(true, this.group1, this.selected1);