I have checkboxes on my list that are always checked, but I only want them to be checked if the associated object's property "include" is set to true.
Currently, all the checkboxes are checked by default, and when I click on them, they uncheck and exclude the students. I need to have the boxes unchecked unless I manually check them.
I don't have a "checked" attribute set on the template, so I'm not sure why they are checked by default. I'm hoping someone can help me identify my mistake.
Here is the data for my absent students:
absentStudents: [{
"id": 207,
"first_name": "Gabriel De Manuel",
"include": false,
"avatar": null,
"group_id": 24,
"full_name": ", Gabriel De Manuel",
"exclude": false ,
"isGrouped": false,
}, {
"id": 208,
"first_name": "Francisco",
"include": false,
"avatar": null,
"group_id": 24,
"full_name": ", Francisco",
"exclude": false,
"isGrouped": false,
}, {
"id": 209,
"first_name": "Rosa",
"include": false,
"avatar": null,
"group_id": 24,
"full_name": ", Rosa",
"exclude": false,
"isGrouped": false,
}],
excludeAbsent: false,
//my v-model is created by the following function
created() {
this.absentStudentsSelected = this.absentStudents.map(x => x.id);
},
I have displayed these checkboxes for my list
<ul>
<li v-for="absentStudent in absentStudents" class="list-unstyled">
<input type="checkbox" @click="check($event)" v-model="absentStudentsSelected" :value="absentStudent.id">
{{ absentStudent.first_name }}
</li>
</ul>
Check the boxes for each student only if the "excludeAbsent" property is set to true
check: function(e){
if(this.excludeAbsent === true){ //if we want to include absent students
for(var i = 0; i< this.absentStudents.length; i++){
if(e.target. value == this.absentStudents[i].id){
this.absentStudents[i].include = true
}else{
this.absentStudents[i].include = false
}
}
}