使用Bootstrap-Vue时，如何在单击嵌套的b输入组件时防止b下拉菜单关闭? [英] While using Bootstrap-Vue, how do you prevent a b-dropdown from closing when clicking on a nested b-input component?

问题描述

我敢肯定我只是不了解如何实现Vue的事件修改器.根据该文档，我要做的就是添加以下内容:

I'm pretty sure I just don't understand how to implement Vue's Event Modifiers. According to that documentation, all I have to do is add this:

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

这是我将示例解释为哈巴狗代码的方式:

Here's how I interpreted the example into my pug code:

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问题.

It looks pretty simple, however it's not working as expected. If you need more supporting info, just ask. And feel free to tweak the title; I wasn't sure if my question is a vue, bootstrap-vue, or javascript question.

感谢您的时间，
凯文

Thanks for your time in advance,
Kevin

推荐答案

由于您单击的是组件，因此应将.native与.stop修饰符组合在一起，例如:

Since you're clicking on a component you should combine .native with .stop modifiers like so :

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

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

if you're using a simple HTML element like input you could use only .stop modifier:

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

这篇关于使用Bootstrap-Vue时，如何在单击嵌套的b输入组件时防止b下拉菜单关闭?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！