如何在选中复选框时将新值推送到数组中，并在使用 Vue.js 取消选中时删除？

Question

I just started learning vue.js, I have such a problem, I have dynamic data which I render with 'v-for' loop, Also I have an empty array where I want to push checked checkbox data, and remove this data after uncheck, also I am trying to update new array if any of object data will change, for example, if I push first object into an empty array and then update the quantity value I don't want to push a new object But also want to update existing

 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>

Answer 1

    <ul class="category__list">
      <li v-for="(category, index) in categoriesData[categoryTitle]" :key="index">
        <input type="checkbox" :value="category" v-model="selectedCategories"> 
               {{category}}
      </li>
   </ul>

If you use v-model on checkbox input and declare it as array Vue will automaticly do the job for you. SelectedCategories array will be checked boxes.