Programmatically Opening Bootstrap Vue Dropdown

Scott Stern

# The Skinny || TLDR;

  • If you're using Bootstrap Vue's dropdown found here, and you want to programmatically open the dropdown, simply add class="show" when you want the dropdown to be open. The implementation can look something like:
<b-dropdown class="dropdown" :class="{ show: isOpen }"> // thanks psimyn

Sometimes I spend so much time trying to figure out such a what-I-thought to-be-simple problem when building a feature, I feel like its my duty to share it.

# Whats the issue?

Well this week I was working on building a feature that involves Bootstrap Vue's dropdown. I built the off click to close the dropdown, did the search thingy I needed to, debounced it, but I COULDN'T OPEN THE DROPDOWN PROGRAMMATICALLY! WHERE ARE THE ANSWERS!!!

# The Approach

I looked through the Bootstrap Vue docs and could not find out how to do this anywhere! Stackoverflow...nothing except some recommendations using Jquery, which I really didn't want to do. Long story..don't ask.

AHA!

Let's go to bootstraps docs, cause Bootstrap Vue is built off of Bootstrap. Of course! This must be the way, or la manera in Spanish 😉

# The Solution

Conditionally add the class show to the dropdown.

Hope you enjoyed reading!

# Resources

  • https://getbootstrap.com/docs/4.0/components/dropdowns/
  • https://bootstrap-vue.org/docs/components/dropdown
  • https://vuejs.org/v2/guide/class-and-style.html
The Skinny || TLDR;
Whats the issue?
The Approach
The Solution
Resources