Bootstrap-Vue: @click.native on <b-form-checkbox> behaves weird

Question

I have an issue with b-form-checkbox and b-form-checkbox-group. When I use @click.native, the method I call, is executed two times. Also, if I write my selected (array) values directly into the DOM {{selected}}, I see the correct elements in the array. However if I console.log my selected array in the method I call on @click.native, when clicking a checkbox, it is empty. When I then click the checkbox again (so it is unchecked), my console.log displays the element in my selected array.

{{selected}}

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

And my filtertable is just a console.log

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

If I use @mouseup.native filterTable is only called one time. However the selected array behaves the same. In the DOM it shows correct, but in my method the selected array is inverted.

I created a fiddle for it. https://jsfiddle.net/y998pLya/5/

Thank you.

Answer 1

You may use @input instead of @click.native https://jsfiddle.net/y998pLya/7/