How to trigger bootstrap-vue dropdown from outside element?

Question

I'm trying to open bootstrap-vue dropdown from a outside button. For instance:

 <b-dropdown>
    <template #button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>

<b-button @click="openDropdown">Open Dropdown</b-button> 

<script>
methods: {
 openDropdown(){
   // do something
 }
}
</script>

I see a similar discussion here. But none of them are working. Any update of it or any other method ?

Hiws · Accepted Answer · 2021-12-25 08:03:36Z

1

The PR you linked added show and hide methods which can be accessed by adding a ref to the <b-dropdown>, and then referencing this ref in your method.

<b-dropdown ref="myDropdown"></b-dropdown>

openDropdown() {
  this.$refs.myDropdown.show();
}

Working Example

new Vue({
  el: "#app",
  methods: {
    openDropdown() {
      this.$refs.myDropdown?.show();
    }
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-4">
  <b-dropdown ref="myDropdown">
    <template #button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>

  <b-button @click="openDropdown">Open Dropdown</b-button>
</div>

answered Dec 25, 2021 at 8:03

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

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

2 Comments

Osman Rafi Over a year ago

Works ! what's the difference between this.$refs.myDropdown?.show(); & this.$refs.myDropdown.show() ?

Hiws Over a year ago

The ?. is optional chaining, in-case the ref is undefined/null.

Collectives™ on Stack Overflow

How to trigger bootstrap-vue dropdown from outside element?

1 Answer 1

Working Example

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Working Example

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related