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

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

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

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

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

Answer 2

奇怪的是，虽然使用@Riddhi的codepen的ES6可以正常工作，但是使用TypeScript直接设置visible属性却没有用。

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

单击按钮时显示BootstrapVue下拉菜单（b下拉菜单）

2 个答案: