I am currently facing a situation where I have multiple checkboxes and upon clicking any of them, the value is added to an array. If the checkbox is unchecked, then the item should be removed from the array.
selectAddOn(addOnId) {
if (! this.selectedAddOns.includes(addOnId)) {
this.selectedAddOns.push(addOnId);
}
}
The code above successfully adds the values to my selectedAddOns[]. However, the issue arises when trying to remove the value if the checkbox is checked again. While using else could work, there's a complication due to browser behavior.
When clicking on a <label>, a click event is automatically triggered on the <input>, causing the outer div to receive two events - one from label and one from input. Although adding @click.prevent on the <label> can resolve this, it interferes with custom checkbox styling.
<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>
Do you have any suggestions on how to address this challenge?