Checkbox issue in vue.js

Question

I have below checkboxes

<div v-for="skill in skills">
  <div class="skill"> 
      <input type="checkbox" value="skill.skill_name" v-model="checkedSkills" @click="getVal()"/>
                <b>{{ skill.skill_name }}</b>
  </div>
</div>

If I click one checkbox all checkboxes become checked.

tony19 · Accepted Answer · 2022-07-15 02:07:46Z

1

First, you should be binding the value attribute, eg

<input type="checkbox"
       :value="skill.skill_name" 
       v-model="checkedSkills" 
       @click="getVal" />

Otherwise, all your checkboxes have the same, static value of "skill.skill_name".

Second, make sure checkedSkills is an array and not a single, scalar value (see https://v2.vuejs.org/v2/guide/forms.html#Checkbox)

data: { // use a function if it's a component
  skills: [], // or whatever initial data you have
  checkedSkills: [] // this is the important bit
}

Demo ~ https://jsfiddle.net/j4wumg5f/

edited Jul 15, 2022 at 2:07

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 12, 2018 at 6:01

Phil

166k25 gold badges265 silver badges269 bronze badges

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

2 Comments

abu abu Over a year ago

Thanks @Phil for your reply. How can I use v-model="checkedSkills" ?

Phil Over a year ago

I'm sorry but I don't understand your question

Collectives™ on Stack Overflow

Checkbox issue in vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related