I recently embarked on my journey to learn vue.js and I've encountered a challenging issue. I have dynamic data that I render using a 'v-for' loop. Additionally, I have an empty array where I need to store checked checkbox data and remove it upon unchecking. Moreover, I am striving to update this array when any object's data is modified. For instance, if I add the first object to the empty array and then adjust the quantity value, I don't want to create a new object but rather update the existing one.
const app = new Vue({
el: '#app',
data: () => ({
products:[
{ itemId:'330012929', name:'testBook', cashBack:'3.00', price:12.99, quantity:1},
{ itemId:'330012922', name:'testBook2', cashBack:'4.00', price:12.2, quantity:1},
]
}),
methods:{
pushValue(arg){
console.log(arg)
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for='(x,index) in products' :key='index'>
<div><span><input type='checkbox' @change='pushValue(x)'><span>item id: {{x.itemId}}</div>
</div>
</div>