Manipulating checkboxes that were created from v-for

August 5, 2022

this is my first time posting, so sorry for any inconvenience.

I am having problems with vue-js, that is with its component manipulation.
I am creating some checkboxes from an array, which have a String called property and a boolean called checked.

Here is my array:

checkedRequests: [
    {
      property: 'cid',
      checked: true
    },
    {
      property: 'companyName',
      checked: true
    },
    {
      property: 'gln',
      checked: true
    },
    {
      property: 'address',
      checked: true
    },
]

And here is my vue div:

<div class="checkDiv" v-for="item in checkedRequests" :key="item.property">
  <input type="checkbox" id="item.property" v-model="item.checked">
  <label for="item.property">{{ item.property }}</label>
  <br>
</div>

My Problem is that when i try to check or uncheck any boxes, only my first property is getting manipulated, e.g ‘cid’. In other words: If I click on address for example to toggle checked to false, ‘cid’ instead will toggle. The data is being portayed correctly but since the Array is false the checked boxes are alwas incorrect.

Thanks in advance!

>Solution :

Right now you have id="item.property" and for="item.property" as a string, using a binding :id="item.property" and :for="item.property" should solve your problem

  <div class="checkDiv" v-for="item in checkedRequests" :key="item.property">
    <input type="checkbox" :id="item.property" v-model="item.checked" />
    <label :for="item.property">{{ item.property }}</label>
    <br />
  </div>