如何务实地打开 Vue-Bootstrap 下拉菜单

Question

当我专注于输入（b-form-input 字段）时，我正在尝试实用地打开 Vue-Bootstrap 下拉列表（b-dropdown）。我在 b-form-input 上调用了 @focus 方法来打开下拉菜单。

这是我的引导代码：

<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。但它很快打开然后关闭。

我关注了How to open Bootstrap dropdown programmatically。但它不适用于 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查看我的演示