Display the BootstrapVue Dropdown (b-dropdown) by clicking on a button

Currently using Vue.js version 2.6.10 and BootstrapVue version 2.0.0-rc.20. The goal is to dynamically display a dropdown menu upon clicking a separate button within 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 thoughts on why this behavior is occurring?

typescriptvue.jsvuejs2bootstrap-vue

Answer №1

Surprisingly, when attempting to directly manipulate the visible property with TypeScript, it did not yield the expected results compared to the success obtained using ES6 in a codepen shared by @Riddhi.

To resolve this issue, I decided to upgrade bootstrap-vue to version 2.0.0-rc.21 and utilize the show() method as demonstrated below:

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

Answer №2

Learn how to programmatically open a dropdown menu with this clever workaround.

To do this, simply adjust the visibility property to true or false as needed.

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

Check out the CodePen demo that demonstrates how to open a Bootstrap Vue dropdown using a ref.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

To-do list application: organizing tasks into local storage for easy access

Struggling to make a todo-app function properly with localstorage, I'm a bit lost on the process. The app is built within a Vue.js project using a main.js file that connects two Classes: App.js and Todo.js (see below). import App from "./classes/ ...

javascriptvue.jslocal-storage

Issue with Vuex and Jest - Accessing undefined property <getterName>

Currently, I am attempting to utilize Jest for testing a Vue component that relies on a getter in Vuex. The getter is structured to return a function that ultimately provides an array: questions: state => pageNumber => state.pages[pageNumber].questi ...

javascriptvue.jsjestjsvuex

Are undefined Static Properties an Issue in Mocked Classes? (Jest)

Currently, I am facing a challenge in mocking a class that includes a static property. jest.mock("../../src/logger/index"); import { Logger } from "../../src/logger/index"; // .. const LoggerMock = Logger as jest.MockedClass<typeof ...

javascripttypescriptjestjsmocking

What is the syntax for accessing elements from an iterable?

Is it possible to create a getter that acts like a function generator? My attempts class Foo { * Test1(): IterableIterator<string> { // Works, but not a getter... yield "Hello!"; } * get Test2(): IterableIterator<string> ...

typescriptgeneratorgetter

Exploring the world of global Vuex monitoring

In my large web app, I have a Vuex store that supplies data to many Vue components. I want to log changes to Vuex states or getters, but I need to be able to do so globally without relying on a specific Vue component. This means I cannot use methods like ...

vue.jsvuexwatch

ng-click not triggering the typeScript function

I am encountering an issue while integrating my AngularJS code with TypeScript as my ng-click function is not functioning properly. Below is my controller code: module CustomerSearch.controllers { export class CustomerCtrl { static $inject = [ ...

angularjstypescript

Sharing data between components in Angular2 can be achieved through the use of services

In my Angular2 app, I need to share an object between components. Here is how I'm attempting to do this: First component source code: /* app.component.ts */ // ...imports import {ConfigService} from './config.service'; @Component({ sel ...

typescriptangularangular2-services

Tips for boosting ViteJs development mode performance

One issue I am facing is the slow server performance during development mode. After starting the server and opening the page in my browser, I have to wait 3–6 minutes for it to load! Initially, ViteJs downloads a small amount of resources, but then the ...

javascripttypescriptvue.jsvuejs3vite

Encountering errors 'LeftSegment' not found and 'infer' not found within the react-router directory in the node_modules folder

Currently, I am in the process of updating my application from react-router v3 to v6. At the moment, I have successfully installed react-router-dom v6.2.1 as well as react-router v6.2. Additionally, since I am using Typescript, I have also installed @types ...

reactjstypescriptreact-routerreact-router-dom

Step by step guide on sending an array of objects along with files using FormData

Currently, I am attempting to use axios to send an array of objects to the backend (I am utilizing express.js). When I try to send the object without any files, everything works fine. However, as soon as I attempt to include files along with it, I encounte ...

javascriptnode.jsvue.jsexpressaxios

displaying specific items in a vue list based on status conditions

Here is my Vue code snippet (and a working fiddle): https://jsfiddle.net/he26tn53/: <div id="app"></div> new Vue({ el: "#app", template:`<h2>People:</h2><span @click="showOnlyEnabled = !showOnlyEnable"> toggle enabled< ...

vue.jsvuejs2

Contrasting the utilization of `typeof` with a constant and `enum` in TypeScript

Can you explain the distinction between using typeof with a constant and an enum in TypeScript? For example: const TYPE_A = 'a' const TYPE_B = 'b' type MyType = | typeof TYPE_A | typeof TYPE_B type Result = { name: string type ...

typescript

Tips for navigating to a different tab within a component in Angular 12

I am attempting to use the routerLink to redirect to a different tab within another component. For instance, in the Dashboard component: <a class="hvr-icon-forward" [routerLink]="['/app/Snow']"> <span cla ...

jqueryangulartypescript

Encountering a typescript error: Attempting to access [key] in an unsafe manner on an object of

I have recently developed a thorough equality checking function. However, I am encountering an issue with the highlighted lines in my code. Does anyone have any suggestions on how to rectify this problem (or perhaps explain what the error signifies)? Her ...

javascriptreactjstypescripttypescript-typings

Loading a link within a Vue.js component is a seamless process

Looking to incorporate an external URL into my Vue Application while keeping the Toolbar and Sidebar intact within a component. Any suggestions on how I can achieve this? Thanks in advance ...

htmlvue.jsvuetify.js

Enhancing TypeScript Native Interface Properties in TypeScript 2.4

After discovering an error in the native Typescript interface for HTMLTextAreaElement, I realized the need to make a correction. The current interface looks like this: interface HTMLTextAreaElement { setSelectionRange(start: number, end: number): void; ...

typescripttypescript-typings

When using React Router with Suspense for lazy loading, my notFound page consistently displays beneath all of my components

I have a component that generates dynamic routes using a list called routes[], but whenever I add the route for the "not found" page NotFoundUrl, it always displays it in all components. All the other routes work perfectly fine, but when adding the 404 ro ...

javascriptreactjstypescriptreact-router-dom

What is the method for implementing two-way binding on a checkbox in Angular?

Within my accordion, I have a series of options in the form of checkboxes. Users are able to select these checkboxes, but I am seeking a way to pre-select certain checkboxes based on specific conditions. The challenge arises when these conditions are deter ...

javascripthtmlarraysangulartypescript

A guide on incorporating Typescript into Material UI v5 themes

A similar question has been asked previously, however... I am looking to enhance my color options by adding variants such as success, warning, and more choices within the background category (palette.background). Specifically interested in a lite option t ...

reactjstypescriptmaterial-ui

Fatal error: artisan storage:link in Laravel terminated

the non-functional link and the generated file content I have established a directory called "storage" within the public folder and attempted to execute: artisan storage:link however, it results in the message "Killed". I am looking to store images in ...

laravelvue.js