Получить BootstrapVue Dropdown (b-dropdown), чтобы показать при нажатии кнопки - PullRequest
Новая
       12

Получить BootstrapVue Dropdown (b-dropdown), чтобы показать при нажатии кнопки

0 голосов
/ 23 мая 2019

Использование 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>

Есть идеи, что происходит?

Ответы [ 2 ]

0 голосов
/ 30 мая 2019

Как ни странно, прямая установка свойства visible с помощью TypeScript не работала, хотя она работала нормально, используя ES6 для codepen @ Riddhi.

Мое решение было обновить 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>
0 голосов
/ 23 мая 2019

Вот обходной путь, с помощью которого вы можете программно открыть раскрывающееся меню.

Для этого вам нужно будет установить его свойство видимым в true / false, если необходимо. 

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

Здесьявляется кодовой ссылкой , которая показывает демонстрационную версию программного открытия раскрывающегося списка начальной загрузки с использованием ссылки.

...