Bootstrap-Vue：<b-form-checkbox>の@ click.nativeが異常な動作をします

Question

b-form-checkboxとb-form-checkbox-groupに問題があります。 @click.nativeを使用すると、私が呼び出すメソッドが2回実行されます。また、選択した（配列）値を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> 

そして、私はmouseup.native filterTable @使用している場合は、私のfiltertableだけではconsole.log

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

で一度だけ呼ばれます。しかし、選択された配列は同じように動作します。 DOMでは正しいが、私の方法では、選択された配列が反転されます。

私はそれのためのフィドルを作成しました。 https://jsfiddle.net/y998pLya/5/

ありがとうございます。

Answer 1

あなたは唯一の問題は、私は、デフォルトでは、ブートストラップ・VUEテーブルヘッダ（TH）、内側に配置しているため、私は、チェックボックスをクリックしたときの伝播を停止する必要があるということです代わりに@click.native https://jsfiddle.net/y998pLya/7/