Greetings everyone, this is my first time reaching out for help, so please bear with me.
I am encountering difficulties with vue-js specifically related to component manipulation. My issue lies in creating checkboxes from an array that consists of a String property and a boolean checked value.
Below is the array in question:
checkedRequests: [
{
property: 'cid',
checked: true
},
{
property: 'companyName',
checked: true
},
{
property: 'gln',
checked: true
},
{
property: 'address',
checked: true
},
]
Furthermore, here is the vue div code snippet:
<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>
The problem I am facing occurs when attempting to check or uncheck the boxes. Only the first property ('cid') is being manipulated instead of the intended one. For example, if I click on 'address' to toggle its checked value to false, 'cid' will be affected instead. Although the data is displayed correctly, due to this error in the array structure, the checked boxes do not align accordingly.
Thank you for any assistance in advance!