vuejs v-model on multiple checkboxes

Question

I'm having a hard time figuring out why all my checkboxes are becoming checked at once in my mapped vuejs tags.

I only want to check them one at a time but I can't remove the checkbox inputs from inside the

or my reference to student.someValue becomes undefined.

<div class="modal-body modalBody" >
  <form @submit.prevent="makeExclusionGroup">
   <ul>
     <li class="listItems" v-for="(student, index) in students">
      {{student.first_name}}
      <input v-model="toExclude.selected" id="student.index" :value="student.full_name" type="checkbox"> 
     </li>                  
   </ul>
 </form>
</div>

palaѕн · Accepted Answer · 2020-04-09 08:15:57Z

1

This is happening because you have set a single model value toExclude.selected to all of the checkboxes, which means all of the checkbox now will have the same effect. So, to resolve this issue you can simply add a property like selected to student object so that each single checkbox will have its own value.

Demo:

new Vue({
  el: "#myApp",
  data: {
    students: [{text: 'Student 1', selected:false},{text: 'Student 2', selected:false},{text: 'Student 3', selected:false}]
  },
  methods: {
  }
})

ul li { display: inline-block; padding: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
  <ul>
     <li class="listItems" v-for="(student, index) in students">
      {{student.text}}
      <input v-model="student.selected" id="index" :value="student.text" type="checkbox"> 
     </li>                  
   </ul>
   <br/>
   <h5>Selected Options:</h5>
   <pre>{{students.map(s=>s.selected)}}</pre>
</div>

edited Apr 9, 2020 at 8:15

answered Apr 9, 2020 at 8:10

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monsterpiece Over a year ago

thanks, suspected something had to be all 1 value, didn't realize what ;)

Radu Diță · Accepted Answer · 2020-04-09 08:10:28Z

1

You need to have a v-model for each check box.

All your checkboxes are referencing the same model.

Try to change it to use a flag on the student

<li class="listItems" v-for="(student, index) in students">
  {{student.first_name}}
  <input v-model="student.isSelected" id="student.index" :value="student.full_name" type="checkbox"> 
</li>

And then you can filter based on isSelected to get the selected students

students.filter(student => student.isSelected)

answered Apr 9, 2020 at 8:10

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

vuejs v-model on multiple checkboxes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related