使用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屋!