[Vuejs]-Checkbox inputs are checked by default?

by

0đź‘Ť

checked="false"

This right there is your problem. will only take “checked” as a positive attribute for when you checked a checkbox, but “checked” takes no further arguments. Writing it the way you did will make the browser read the “checked” part and ignore the rest, therefore rendering the box checked.

Check out the MDN page on that specific input type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

0đź‘Ť

Remove checked="false" from your input, Vue will add this attribute when user check it.

<li v-for="absentStudent in absentStudents" class="list-unstyled">
    <input type="checkbox" @change="check($event)" v-model="absentStudentsSelected" :value="absentStudent.id" >
    {{ absentStudent.first_name }}
</li>

UPDATE

new Vue({
  el: '#app',
  data: {
    absentStudentsSelected: [],
    students: [{
      "id": 189,
      "first_name": "el Mahdi",
      "avatar": null,
      "group_id": 24,
      "full_name": ", el Mahdi",
      "exclude": false,
      "isGrouped": false,
      "include": false,
    }, {
      "id": 190,
      "first_name": "Walid",
      "avatar": null,
      "group_id": 24,
      "full_name": ", Walid",
      "exclude": false,
      "isGrouped": false,
      "include": false,
    }]
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>


<div id="app">
  <li v-for="absentStudent in students" class="list-unstyled">
    <input type="checkbox" v-model="absentStudentsSelected" :value="absentStudent.id"> {{ absentStudent.first_name }}
  </li>
  
  {{absentStudentsSelected}}
</div>

Leave a comment