1

I have a project in vuejs which bootstrap is already installed. I am using html, css project and converting into vuejs which bootstrap classes are used. However, dropdown bootstrap classes are not working for example, the below classes are not adding Show class when its getting clicked and normal html file is showing show class.

dropdown-toggle dropdown-menu

I have

"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"@popperjs/core": "^2.11.5",

Can someone please suggest something?

Thanks

Improve this question

1 Answer 1

Reset to default
1

Use show or shown

The in Bootstrap-Vue doesn't have a click event, but it does emit a show event shortly before the dropdown appears, including when it's clicked. It immediately follows.

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yes I have done this..Just for others who may get this useful. methods: callShow() { this.callDropdownFlag = !this.callDropdownFlag; } //put this on the div where show class should show. :class="{show: callDropdownFlag }"