typescript - 获取 BootstrapVue 下拉列表(b-dropdown)以在单击按钮时显示

Question

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

知道发生了什么吗？

Answer 1

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

我的解决方案是将 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>