@click on checkbox add/remove data

Hi there,

I currently have the following scenario:

I have multiple checkboxes, once any is clicked, the value of it will get added to an array. If the checkbox is unchecked then the item needs to be removed out of the array again.

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

The following works and it adds them to my selectedAddOns[]. But when the checkbox is checked again, it is not removed. Sure, I could just use else, but...

Unfortunately, the browser behavior is when you click on a <label>, a click event will automatically be triggered on the <input>, so the outer div receives 2 events, one from label, one from input. I am aware that I can work around this by adding @click.prevent on the <label>, but this then will not add my custom checkbox styles.

    <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>

Any idea on how I can work around this scenario?

Thanks soo much!