使用 Bootstrap-Vue 时，如何防止 b-dropdown 在单击嵌套的 b-input 组件时关闭？

Question

我很确定我只是不明白如何实现 Vue 的 Event Modifiers。根据该文档，我所要做的就是添加：

<!-- 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

由于您点击的是一个组件，因此您应该将 .native 与 .stop 修饰符结合使用，如下所示：

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

如果您使用简单的 HTML 元素，例如 input，您只能使用 .stop 修饰符：

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

Answer 2

您现在可以使用新的 <b-dropdown-form> sub-component 将输入字段放入下拉列表中。

您应该避免将输入控件放置在 <b-dropdown-item>（呈现 <a> 作为其根元素）或 <b-dropdown-item-button>（呈现 <button> 作为其根元素）内元素）。 HTML5 不喜欢 <a> 或 <button> 元素中的交互元素。

<b-dropdown-form> 不会 auto-close 单击下拉菜单。

使用 Bootstrap-Vue 时，如何防止 b-dropdown 在单击嵌套的 b-input 组件时关闭？

While using Bootstrap-Vue, how do you prevent a b-dropdown from closing when clicking on a nested b-input component?

javascript

vue.js

pug

vuejs2

bootstrap-vue