@click追加/削除チェックボックスのデータ

Question

私は現在、次のシナリオを持っている：

いずれかがクリックされたら、私は、複数のチェックボックスを持って、それの値が配列に追加されます。このチェックボックスをオフにすると、アレイから項目を再度削除する必要があります。

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

次の作品は、私のselectedAddOns[]に追加します。しかし、チェックボックスをもう一度チェックすると、そのチェックボックスは削除されません。確かに、私はちょうど

をelseを使用していますが、...可能性が残念ながら、ブラウザの動作は、あなたが<label>をクリックしたときで、クリックイベントが自動的に<input>にトリガされますので、外側のdivが2つのイベントから1を受け取り、ラベル、入力から1つ。私は<label>に@click.preventを追加することでこの問題を回避できますが、これで私のカスタムチェックボックスのスタイルは追加されません。

<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ハンドラは必要ありません。 （コードは臆面もなくバートの答えから持ち上げる。）

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>

Answer 2

inputにクリックイベントハンドラを配置します。

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>