How to use click event with Bootstrap-Vue in Vue.js?

Question

How do I use the click event with the <b-nav-item-dropdown> in Bootstrap-Vue shown below? I checked out the Vue.js documentation but I am not able to find any click event for <b-nav-item-dropdown>.

<b-nav-item-dropdown text="nav_title">
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
</b-nav-item-dropdown>

Answer 1

Use show or shown

The <b-nav-item-dropdown> in Bootstrap-Vue has no click event, but emits an event called show just before the dropdown is shown, including when it is clicked. It emits shown right after.

<b-nav-item-dropdown @show="doSomething">

Your code:

<b-nav-item-dropdown text="nav_title" @show="doSomething">
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
</b-nav-item-dropdown>

methods: {
  doSomething() {
    console.log('shown');
  }
}

(You didn't find information for it on Vue's site because they didn't make the library.)