Bootstrap-Vue：<b-form-checkbox> 上的 @click.native 行为怪异答案

【问题标题】：Bootstrap-Vue: @click.native on <b-form-checkbox> behaves weirdBootstrap-Vue：<b-form-checkbox> 上的 @click.native 行为怪异
【发布时间】：2018-04-06 05:39:34
【问题描述】：

我对@987654322@ 和b-form-checkbox-group 有疑问。当我使用@click.native 时，我调用的方法会执行两次。此外，如果我将我选择的（数组）值直接写入 DOM {{selected}}，我会在数组中看到正确的元素。但是，如果我在@click.native 上调用的方法中console.log my 选择了数组，则单击复选框时，它是空的。然后当我再次单击复选框（因此未选中）时，我的 console.log 将显示我选择的数组中的元素。

{{selected}}

<b-form-checkbox-group
stacked
:options="options"
v-model="selected"
@click.native ="filterTable"
></b-form-checkbox-group>

而我的 filtertable 只是一个 console.log

filterTable(){
   console.log(this.selected);
}

如果我使用@mouseup.native filterTable 只会被调用一次。但是，所选数组的行为相同。在 DOM 中它显示正确，但在我的方法中，所选数组是倒置的。

我为它制作了一个小提琴。 https://jsfiddle.net/y998pLya/5/

谢谢。

【问题讨论】：

标签： javascript checkbox bootstrap-4 vue.js

【解决方案1】：

您可以使用@input 代替@click.native https://jsfiddle.net/y998pLya/7/

【讨论】：

唯一的问题是我需要在单击复选框时停止传播，因为我将它放在 bootstrap-vue 表头（th）中，默认情况下会激活排序功能。你知道如何向@input 添加停止传播吗？
这可能已经解决了，但是对于其他有此问题的人，我正在使用@change，这工作正常。