Как прагматично открыть выпадающий Vue-Bootstrap

Question

Я пытаюсь прагматично открыть раскрывающийся список Vue-Bootstrap (b-dropdown), когда фокусируюсь на вводе (поле ввода b-формы). Я вызвал метод @focus на b-form-input, чтобы открыть выпадающий список.

Вот мой код начальной загрузки:

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

Вот мой код Vuejs:

methods:{

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

}

Я пробовал много способов, таких как установка elem.visible = true. Но он быстро открывается, а затем закрывается.

Я следовал Как программно открыть выпадающий список Bootstrap . Но это не относится к vue-bootstrap.

Answer 1

Вы можете использовать jQuery для переключения выпадающего списка

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>

Проверьте мое демо на https://codepen.io/ittus/pen/OZEOGW