获取 BootstrapVue 下拉菜单（b-dropdown）以在单击按钮时显示

Posted 2023-02-22

【中文标题】获取 BootstrapVue 下拉菜单（b-dropdown）以在单击按钮时显示

【英文标题】：Get BootstrapVue Dropdown (b-dropdown) to show when clicking a button

【发布时间】：2019-10-09 23:52:33

【问题描述】：

使用 Vue.js 2.6.10 和 BootstrapVue 2.0.0-rc.20 并尝试在单击单个文件组件中的单独按钮时以编程方式显示下拉列表。

<template lang='pug'>
div
  b-button(@click='loginShow') Test
  b-dropdown(id='login-dropdown', ref='dropdown', text='Login')
    b-dropdown-item(to='/login') Login
    b-dropdown-item(to='/signup') Sign up
</template>

<script lang="ts">
import  Component, Vue, Prop  from 'vue-property-decorator';
import  BDropdown  from 'bootstrap-vue';

@Component
export default class Login extends Vue 

  private loginShow(e: any): void 
    const dropdown = this.$refs.dropdown as BDropdown;
    dropdown.visible = true;
  

</script>

知道发生了什么吗？

【参考方案1】：

奇怪的是，使用 TypeScript 直接设置可见属性并不起作用，尽管使用 ES6 根据 @Riddhi 的 codepen 可以正常工作。

我的解决方案是将 bootstrap-vue 更新到 2.0.0-rc.21 并使用 show() 方法：

<template lang='pug'>
div
  b-button(@click='loginShow') Test
  b-dropdown(id='login-dropdown', ref='dropdown', text='Login')
    b-dropdown-item(to='/login') Login
    b-dropdown-item(to='/signup') Sign up
</template>

<script lang="ts">
import  Component, Vue, Prop  from 'vue-property-decorator';
import  BDropdown  from 'bootstrap-vue';

@Component
export default class Login extends Vue 

  private loginShow(e: any): void 
    const dropdown = this.$refs.dropdown as BDropdown;
    dropdown.show();
  

</script>

【讨论】：

对于任何在表格中提出许多下拉菜单的人，我都可以通过设置动态 ref :ref="menu_$row.item.index@ 在行选择时触发打开它987654323@

【参考方案2】：

这是您可以通过它以编程方式打开下拉菜单的解决方法。

为此，您必须根据需要将其可见属性设置为 true/false。

this.$refs.ddown.visible = true // to show;
this.$refs.ddown.visible = false // to hide;

这里是codepen link，它展示了使用 ref 以编程方式打开引导 vue 下拉菜单的演示。

【讨论】：

尝试让您的解决方案适应 TypeScript：