While using Bootstrap-Vue, how do you prevent a b-

Question

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

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

Answer 1

You can now use the new <b-dropdown-form> sub-component for placing input fields into dropdowns.

You should avoid placing input controls inside <b-dropdown-item> (which renders an <a> as it's root element), or <b-dropdown-item-button> (which renders a <button> as its root element). HTML5 doesn't like interactive elements inside <a> or <button> elements.

<b-dropdown-form> does not auto-close the dropdown when it is clicked.

Answer 2

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

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

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

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