My products json contains various details similar to the examples below.
products.json
products: [
{
"id": "6",
"name": "Cake-WhiteForest",
"manufacturer": "Cake Cafe",
"category": "WhiteForest",
"color": "White",
"available": true,
"address": "16th Lane",
"quantity": 8,
"description": "milk chocolate wafer",
"price": 12,
"delivery": "small"
},
{
"id": "10",
"name": "Donuts-Choco bun",
"manufacturer": "Donut House",
"category": "Choco bun",
"color": "chocolate",
"available": true,
"address": "13th Avenue",
"quantity": 14,
"description": "Donuts with dark chocolate",
"price": 13,
"delivery": "minibox"
}
]
I am presenting these product names in a list format with checkboxes, like this:
CheckBox1 Cake-WhiteForest
CheckBox2 Donuts-Choco bun
methods: (checkbox change event)
check(e) {
if (e.target.checked) {
let selectedProduct = this.products.find(item => item.id === e.target.value)
this.getCheckedProducts.push(selectedProduct)
}
}
Component Code for this
<li
v-for="product in products"
:key="product.id">
<span>
<input type="checkbox"
:id="product.id"
:value="product.id"
v-model="checkedProducts"
@change="check($event)"/>
<span class="doc_input">
<i class="el-icon-folder" aria-hidden="true"></i>
</span>
<span class="product__name">
{{product.name}}
</span>
</span>
</li>
The issue arises when I select both items from the list. Although it correctly adds them to the 'getCheckedProducts' array, unchecking one of the checkboxes does not update the array. Both items remain selected. How can I manage the checkbox state?
The v-model log provides prototype details. How should v-model be utilized in this case where an array of objects is being passed?