CODEWITHSUNDEEP
vue.js
Danyal Sandeelo
Danyal Sandeelo

Reputation: 12391

Cannot assign value to checkbox in vue.js

I am creating a list of check boxes via a result set. I can see the correct values but I am not able to set the value correctly

 <ul>
    <li v-for="role in roles">
        <input type="checkbox" :value="role.id"  v-model="form.roleIds" > {{role.name}}
    </li>
</ul>

When I click on one of the check boxes, I see all of them clicked.

enter image description here

That's what I see in console:

enter image description here

Upvotes: 1

Views: 310

Answers (2)

arora
arora

Reputation: 869

I think your data property roleIds is not defined properly, it should be like this -

roleIds: []

Test.vue

<template>
  <ul>
    <li v-for="(role, i) in roles" :key="i">
      <label>
        <input type="checkbox" :value="role.id"  v-model="form.roleIds" >
        {{role.name}}
      </label>
    </li>
  </ul>
</template>

<script>
  export default {
    data: () => ({
      form: {
        roleIds: [] // **this is the catch**
      },
      roles: [{
        id: 1,
        name: 'Siddharth'
      },
      {
        id: 2,
        name: 'Arora'
      }]
    })
  }
</script>

Upvotes: 1

Rijosh
Rijosh

Reputation: 1544

Console the roles array and confirm there is value for id in every entries of roles. It seems like the value for id is null.

Upvotes: 1

Related Questions