How Can I Make All Checkboxes "Checked" By Default - checkbox

Question

How can I ensure by default all by checkboxes (output from my data) are all checked by default on load?
Output checkbox
<div v-for="(category, index) in remove_category_duplicates" class="form-check">
<input type="checkbox" class="form-check-input" v-model="cat_data" :id="category" :value="category">
<label class="form-check-label">{{ category }}</label>
</div>
Setup checkbox values from data
remove_category_duplicates: function () {
// Get all categories and remove duplicates
let data = {}
this.info.forEach(i=>{
Object.assign(data,i.category_data);
})
return data;
},
Data:
{
"id": 1,
"title": "Title one",
"category_data": {
"2": "Team",
"7": "Queries"
}
},
CodePen: https://codepen.io/anon/pen/XxNORW?editors=1011
Thanks

Answer 1

To initialize the checkboxes to true/checked, their v-model array (cat_data) should contain the true-value of each checkbox. In this case, it would be:
["Team", "Questions", "Queries", "Fax"]
Here's how I would update your code:
Add a computed property to return an array of available categories:
computed: {
categories() {
const cats = this.remove_category_duplicates;
return Object.keys(cats).map(k => cats[k]);
}
}
Update select() to set cat_data based on selectAll. If selectAll is true, set cat_data to the category array computed above (thus marking all boxes checked), or else an empty array (thus unchecking all boxes):
methods: {
select() {
this.cat_data = this.selectAll ? this.categories : [];
}
}
Add a method (e.g., named "toggleSelectAll") to toggle selectAll based on whether all checkboxes are checked, keeping the Select All checkbox in sync with the state of the other checkboxes:
methods: {
toggleSelectAll(e) {
const checked = e.currentTarget.checked;
if (checked) {
this.selectAll = this.arrayContains(this.categories, this.cat_data);
} else {
this.selectAll = false;
}
}
}
Add a change-handler on each checkbox (except the Select All box) that calls toggleSelectAll defined above:
<div v-for="category in remove_category_duplicates">
<input type="checkbox" #change="toggleSelectAll">
demo