vue.jsvuejs2vue-componentbootstrap-vuevue-events

How to use click event with Bootstrap-Vue <b-nav-item-dropdown> in Vue.js?


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>

Solution

  • 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.)