javascript - @单击复选框添加/删除数据

Question

我目前有以下情况:

我有多个复选框，一旦单击任何一个，它的值就会添加到数组中。如果未选中该复选框，则需要再次从数组中删除该项目。

selectAddOn(addOnId) {
    if (! this.selectedAddOns.includes(addOnId)) {
        this.selectedAddOns.push(addOnId);
    }
}

以下内容有效，并将它们添加到我的 selectedAddOns[] 中。但当再次选中该复选框时，它不会被删除。当然，我可以使用 else ，但是……

不幸的是，浏览器的行为是当您单击<label>时， <input> 上会自动触发点击事件，因此外部 div 接收 2 个事件，一个来自标签，一个来自输入。我知道我可以通过添加 @click.prevent 来解决这个问题关于<label> ，但这不会添加我的自定义复选框样式。

<div @click="selectAddOn(index)" class="col-6" v-for="(addOn, index) in categories[categoryId].addOns">
    <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">{{ addOn.name }} (+ ${{ addOn.price }})</span>
    </label>
</div>

知道如何解决这种情况吗？

Answer 1

这是与多个复选框上的数组一起使用时 v-model 的内置行为。您不需要 click 处理程序。 (代码无耻地摘自 Bert 的回答。)

console.clear()

new Vue({
  el: "#app",
  data:{
    selectedAddOns:[],
    categories:[
      {
        addOns:[
          {name: "AddOn One", price: 10},
          {name: "AddOn two", price: 20},
          {name: "AddOn Three", price: 30},
        ]
      },

    ],
    categoryId: 0
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  Selected Addons: {{selectedAddOns}}
  <div class="col-6" v-for="addOn, index in categories[categoryId].addOns">
    <label class="custom-control custom-checkbox" >
        <input type="checkbox" class="custom-control-input" :value="index" v-model="selectedAddOns" >
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">{{ addOn.name }} (+ ${{ addOn.price }})</span>
    </label>
</div>
</div>