如何务实地打开 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。但它很快就会打开，然后关闭。

我已经遵循了如何以编程方式打开引导下拉列表。但它不适用于 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 查看我的演示