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

我目前有以下情况：

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

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

以下操作有效，并将它们添加到我的

selectedddons[]

中。但当再次选中该复选框时，它不会被删除。当然，我可以使用

其他
，但是

不幸的是，浏览器行为是当您单击
时，将在
上自动触发一个单击事件，因此外部div接收两个事件，一个来自标签，一个来自输入。我知道我可以通过在
上添加
@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>


{{addOn.name}（+${{addOn.price}}）

你知道我如何解决这个问题吗？
把点击事件处理程序放在
输入上


console.clear（）
新Vue({
el:“应用程序”，
数据：{
选定的地址：[]，
类别：[
{
插件：[
{名称：“插件一”，价格：10}，
{名称：“插件二”，价格：20}，
{名称：“附加三”，价格：30}，
]
},
],
类别ID:0
},
方法：{
选择addon（addOnId）{
让index=this.selectedAddOns.findIndex（a=>a==addOnId）
如果（索引>=0）
此.selectedddons.splice（索引，1）
其他的
此.selectedddons.push（addOnId）；
}
}
})

选定的加载项：{{selectedAddOns}
{{addOn.name}（+${{addOn.price}}）
将单击事件处理程序放在
输入上


console.clear（）
新Vue({
el:“应用程序”，
数据：{
选定的地址：[]，
类别：[
{
插件：[
{名称：“插件一”，价格：10}，
{名称：“插件二”，价格：20}，
{名称：“附加三”，价格：30}，
]
},
],
类别ID:0
},
方法：{
选择addon（addOnId）{
让index=this.selectedAddOns.findIndex（a=>a==addOnId）
如果（索引>=0）
此.selectedddons.splice（索引，1）
其他的
此.selectedddons.push（addOnId）；
}
}
})

选定的加载项：{{selectedAddOns}
{{addOn.name}（+${{addOn.price}}）
当与多个复选框上的数组一起使用时，这是
v-model
的内置行为。您不需要
单击
处理程序。（代码无耻地从伯特的回答中删除。）


console.clear（）
新Vue({
el:“应用程序”，
数据：{
选定的地址：[]，
类别：[
{
插件：[
{名称：“插件一”，价格：10}，
{名称：“插件二”，价格：20}，
{名称：“附加三”，价格：30}，
]
},
],
类别ID:0
}
})

选定的加载项：{{selectedAddOns}
{{addOn.name}（+${{addOn.price}}）
当与多个复选框上的数组一起使用时，这是
v-model
的内置行为。您不需要
单击
处理程序。（代码无耻地从伯特的回答中删除。）


console.clear（）
新Vue({
el:“应用程序”，
数据：{
选定的地址：[]，
类别：[
{
插件：[
{名称：“插件一”，价格：10}，
{名称：“插件二”，价格：20}，
{名称：“附加三”，价格：30}，
]
},
],
类别ID:0
}
})

选定的加载项：{{selectedAddOns}
{{addOn.name}（+${{addOn.price}}）
我总是忘记那种行为。>我打赌你再也不会忘记它了我总是忘记那种行为我打赌你再也不会忘记它了