Cannot assign value to checkbox in vue.js

Question

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.

That's what I see in console:

form: { file: null, name: null, description: null, url: null, position: null, partnerId: null, roleIds: null, }, that's the next step, you can see the html generated, there is no value being set @Vucko — Danyal Sandeelo
– Danyal Sandeelo, Commented Mar 17, 2020 at 11:37
It's null so every chechkbox is binding to that null. Use an array reather. Look at the jsfiddle example how they bind the value to each object in the array. — Vucko
– Vucko, Commented Mar 17, 2020 at 11:40
@Vucko actually i wanted to show that form exists. I am not talking about server side now, I am getting the value as boolean instead of integer. Value is empty, you can see that. — Danyal Sandeelo
– Danyal Sandeelo, Commented Mar 17, 2020 at 11:42

arora · Accepted Answer · 2020-03-17 12:02:17Z

1

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>

answered Mar 17, 2020 at 12:02

arora

8697 silver badges12 bronze badges

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

Comments

Rijosh · Accepted Answer · 2020-03-17 11:53:05Z

1

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.

answered Mar 17, 2020 at 11:53

Rijosh

1,5641 gold badge9 silver badges13 bronze badges

1 Comment

Danyal Sandeelo Over a year ago

You are right, there was a jsonignore tag on the property which is why json couldn't get it

Collectives™ on Stack Overflow

Cannot assign value to checkbox in vue.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related