CODEWITHSUNDEEP
typescriptvue.jsvuejs2bootstrap-vue
nstuyvesant
nstuyvesant

Reputation: 1516

Get BootstrapVue Dropdown (b-dropdown) to show when clicking a button

Using Vue.js 2.6.10 and BootstrapVue 2.0.0-rc.20 and trying to programmatically display a dropdown when clicking a separate button in a single file component.

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

Any idea what's happening?

Upvotes: 3

Views: 6567

Answers (2)

nstuyvesant
nstuyvesant

Reputation: 1516

Oddly, directly setting the visible property using TypeScript didn't work though it worked fine using ES6 per @Riddhi's codepen.

My solution was to update bootstrap-vue to 2.0.0-rc.21 and use the show() method:

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

Upvotes: 5

Riddhi
Riddhi

Reputation: 2244

Here is the workaround through which you can open the dropdown menu programatically.

For that you will have to set its property visible to true/false as needed.

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

Here is the codepen link that shows the demo of opening a bootstrap vue dropdown programatically by using ref.

Upvotes: 0

Related Questions