dimanche 12 avril 2020

checkbox only on condition vue

I have these checkboxes which always stay checked but I only want to check them if the object they are associated with's property called include is set to true.


right now my issue is that all the boxes stay checked, then when I click them they uncheck and then exclude students. I need to make the boxes unchecked unless I check them.

I don't have a checked attribute set on the template so I don't know why they would be checked by default? I'm hoping someone can point out my mistake.

my absent students data:

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,  
                }]

I have rendered 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">
                        
                    </li>
                </ul>

check the boxes for each student as long as this.excludeAbsent is 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 
                            }
                        }
                    }



Aucun commentaire:

Enregistrer un commentaire