@單擊上覆選框添加/刪除數據

我有多個複選框，任何一次點擊，它的價值就會被添加到一個數組。如果取消選中該複選框，則需要將該項目再次移出陣列。

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

下工作，並把它們添加到我的selectedAddOns[]。但是當複選框再次被選中時，它不會被刪除。當然，我可以只使用else，但是......

不幸的是，瀏覽器的行爲是，當你點擊一個<label>，單擊事件將自動在<input>觸發，所以外層div收到2個事件，從一個標籤，一個來自輸入。我知道我可以通過在<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>

有關如何解決此問題的任何想法？

來源

2017-10-06 Chris

這是與多個複選框的陣列一起使用時的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/[email protected]"></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>

來源

2017-10-06 19:20:43

我總是忘了這種行爲。 >< – Bert

我敢打賭，你永遠不會忘記它。 :) –

將點擊事件處理程序放在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/[email protected]"></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>

來源

2017-10-06 19:10:34 Bert

@單擊上覆選框添加/刪除數據

回答

相關問題