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

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")