Bootstrap-Vue: @ click.native в <b-form-checkbox> ведет себя странно

Question

Bootstrap-Vue: @ click.native в <b-form-checkbox> ведет себя странно

1

У меня проблема с b-form-checkbox и b-form-checkbox-group. Когда я использую @click.native, метод, который я вызываю, выполняется два раза. Кроме того, если я напишу свои выбранные (массивные) значения непосредственно в DOM {{selected}}, я вижу правильные элементы в массиве. Однако, если я console.log my выбранный массив в методе, который я вызываю @click.native, при нажатии на флажок он пуст. Когда я снова поставлю флажок (так что он не отмечен), мой console.log отображает элемент в моем выбранном массиве.

{{selected}}

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

И мой фильтр - это просто console.log

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

Если я использую @mouseup.native filterTable, вызывается только один раз. Однако выбранный массив ведет себя одинаково. В DOM оно отображается правильно, но в моем методе выбранный массив инвертирован.

Я создал скрипку для этого. https://jsfiddle.net/y998pLya/5/

Спасибо.

Casper Slynge 25 окт. 2017, в 10:10

Источник

Теги:

javascript

vue.js

bootstrap-4

checkbox

1 ответ

Ещё вопросы

agriboz · Answer 1 · 2017-10-25T07-24-00.000Z

Вы можете использовать @input вместо @click.native https://jsfiddle.net/y998pLya/7/

Единственная проблема заключается в том, что мне нужно остановить распространение при нажатии на флажок, потому что я помещаю его в заголовок (th) таблицы bootstrap-vue, который по умолчанию активирует функцию сортировки. Знаете ли вы, как добавить остановку распространения в @input?
Взгляните на vuejs.org/v2/guide/events.html#Event-Modifiers