При использовании Bootstrap-Vue, как предотвратить закрытие b-раскрывающегося списка при нажатии на вложенный компонент b-input?

Question

Я почти уверен, что просто не понимаю, как реализовать Модификаторы событий Vue .В соответствии с этой документацией все, что мне нужно сделать, это добавить это:

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

Вот как я интерпретировал пример в свой код мопса:

b-dropdown(text="Actions")
  b-dropdown-item
    b-form(inline)
      .row
        .col
          b-input(@click.stop='' placeholder="#123")
          b-button(:href='printCheck' variant="primary") Print Check

Это выглядит довольно просто, однако этоне работает, как ожидалось.Если вам нужна дополнительная информация, просто спросите.И не стесняйтесь изменять название;Я не был уверен, является ли мой вопрос вопросом vue, bootstrap-vue или javascript.

Спасибо, что заранее договорились,
Кевин

Answer 1

Теперь вы можете использовать новый подкомпонент <b-dropdown-form> для размещения полей ввода в раскрывающихся списках.

Вам следует избегать размещения элементов управления вводом внутри <b-dropdown-item> (который отображает <a> в качестве корневого элемента)или <b-dropdown-item-button> (который отображает <button> в качестве корневого элемента).HTML5 не любит интерактивные элементы внутри <a> или <button> элементов.

<b-dropdown-form> не закрывает раскрывающийся список автоматически при нажатии.

Answer 2

Поскольку вы нажимаете на компонент, вы должны объединить .native с .stop модификаторами, например, так:

 b-input(@click.native.stop='' placeholder="#123")

, если вы используете простой элемент HTML, такой как input, вы можете использоватьтолько .stop модификатор:

 input(@click.stop='' placeholder="#123")