How to open a Vue-Bootstrap Dropdown pragmatically

Question

I'm trying to open a Vue-Bootstrap dropdown (b-dropdown) pragmatically when I focus on an input (b-form-input field). I have called a @focus method on b-form-input to open the dropdown.

Here's My Bootstrap Code:

<b-form-input v-model="search" @focus.native="openDropdown"></b-form-input>

<b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2" ref="dropdownRef">
 <b-dropdown-item>First Action</b-dropdown-item>
 <b-dropdown-item>Second Action</b-dropdown-item>
</b-dropdown>

Here's my Vuejs code:

methods:{

   openDropdown(){
    const elem = this.$refs.dropdownRef;
    elem.click();
   }

}

I have tried many methods like setting elem.visible =true. But it quickly opens and then closes.

I have followed How to open Bootstrap dropdown programmatically . But it doesn't apply to vue-bootstrap.

ittus · Accepted Answer · 2018-05-13 16:23:34Z

-2

You can use jQuery to toggle dropdown

methods:{
   openDropdown() {
    $('#ddown1').dropdown('toggle');
   }
}

new Vue({
  el:'#app',
  data () {
    return {
      search: ''  
    }
  },
  methods:{

   openDropdown() {
    console.log('open');
    $('#ddown1').dropdown('toggle');
   }

}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<link href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
    <b-form-input v-model="search" @focus.native="openDropdown"></b-form-input>

<b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2 active" ref="dropdownRef">
 <b-dropdown-item>First Action</b-dropdown-item>
 <b-dropdown-item>Second Action</b-dropdown-item>
</b-dropdown>
</div>

</div>

Check my demo at https://codepen.io/ittus/pen/OZEOGW

answered May 13, 2018 at 16:23

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

2 Comments

thar Over a year ago

Thanks, your solution works perfectly. But is there a way to approach this without JQuery. As I know VueJS refs were used to getting the references of DOM elements. Is there any way to approach this using VueJS refs ? Of course, I found b-dropdown contains many attributes and methods like visible, click etc. Can't we use one of those attributes to approach the solution? But any of them didn't work for me

crash springfield Over a year ago

Never mix JS frameworks for manipulating the DOM

Collectives™ on Stack Overflow

How to open a Vue-Bootstrap Dropdown pragmatically

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related