如何从外部元素触发bootstrap vue下拉列表

Question

我正试图从外部按钮打开bootstrap vue下拉列表。例如：

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

我在这里看到了类似的讨论。但它们都不起作用。有没有更新或其他方法？

Answer 1

您链接的PR添加了show和hide方法，可以通过向<b-dropdown>添加ref来访问，然后在方法中引用此引用。

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

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

工作示例

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

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/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>