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

【问题标题】：While using Bootstrap-Vue, how do you prevent a b-dropdown from closing when clicking on a nested b-input component?在使用 Bootstrap-Vue 时，如何防止在单击嵌套的 b-input 组件时关闭 b-dropdown？
【发布时间】：2018-12-05 19:48:10
【问题描述】：

我很确定我只是不明白如何实现 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 问题。

提前感谢您的宝贵时间，
凯文

【问题讨论】：

标签： javascript vue.js vuejs2 pug bootstrap-vue

【解决方案1】：

由于您正在单击一个组件，您应该将 .native 与 .stop 修饰符结合起来，如下所示：

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

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

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

【讨论】：

我认为成功了！我刚刚在bootstrap-vue.js.org/docs/components/dropdown# 使用这个代码sn-p 并且它工作：<div> <b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2"> <b-dropdown-item> <b-form> <b-input @click.native.stop placeholder="check number"></b-input> </b-form> </b-dropdown-item> </b-dropdown> </div>

【解决方案2】：

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

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

<b-dropdown-form> 在单击时不会自动关闭下拉菜单。

【讨论】：