When using Vue, I have created dynamic checkboxes that display as shown below:
<li v-for="element in checklist" :key="element.id" class="block w-full p-1">
<div v-if="element.taskId == task" class="w-full border-2 rounded-md p-4">
<div class="float-right">
<button @click="deleteCheck(element.id)">
<Trash2Icon class="px-1"/>
</button>
</div>
<div class="flex">
<input type="checkbox" id="checkbox" v-model="element.checked" class="w-6">
<label for="checkbox" class="px-2">{{element.content}}</label>
</div>
</div>
</li>
I am trying to utilize the "element.checked" value with a watch() function in Vue to send it to an API using axios. Here's what I have attempted:
watch: {
element.checked() { // This part is not working as intended
axios.put('api/blabla' + element.id, // Unsure about this line, just testing
checked: this.element.checked
})
.catch(err => {
console.log(err)
})
}
}
I am open to exploring different methods aside from the one mentioned above. The error occurs when accessing element.checked.
For reference, my checklist data structure is:
"checklist": [
{
"content": "lorem ipsum dolor",
"checked": true,
"id": 1
},
{
"content": "lorem ipsum dolor sit",
"checked": false,
"id": 2
},
]