@单击“添加/删除数据”复选框

Question

我目前有以下情况：

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

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

以下操作有效，并将它们添加到我的selectedddons[]中。但当再次选中该复选框时，它不会被删除。当然，我可以使用其他，但是。。。

不幸的是，当您单击

<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

将单击事件处理程序放在输入上。

js lang-js prettyprint-override">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
  },
  methods:{
    selectAddOn(addOnId) {
      let index = this.selectedAddOns.findIndex(a => a === addOnId)
      if (index >= 0) 
        this.selectedAddOns.splice(index, 1)
      else 
        this.selectedAddOns.push(addOnId);
    }
  }
})

<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" @click="selectAddOn(index)" >
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">{{ addOn.name }} (+ ${{ addOn.price }})</span>
    </label>
</div>
</div>

Answer 2

当与多个复选框上的数组一起使用时，这是v-Model的内置行为。您不需要单击处理程序。（代码无耻地摘自伯特的回答。）

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>