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

【问题标题】：How to push new values into array when checkbox is checked and remove when unchecked using Vue.js?如何在选中复选框时将新值推送到数组中，并在使用 Vue.js 未选中时删除？
【发布时间】：2021-07-25 01:57:13
【问题描述】：

我刚开始学习 vue.js，我遇到了这样一个问题，我有使用“v-for”循环渲染的动态数据，还有一个空数组，我想在其中推送选中的复选框数据，然后删除它取消选中后的数据，如果任何对象数据会更改，我也会尝试更新新数组，例如，如果我将第一个对象推入一个空数组，然后更新数量值我不想推新对象但也想要更新现有的

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>

【问题讨论】：

将 v-model 放入此输入。就是这样。

标签： javascript arrays json vue.js

【解决方案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>

如果您在复选框输入上使用 v-model 并将其声明为数组，Vue 将自动为您完成这项工作。 SelectedCategories 数组将被选中。

【讨论】：