Topic: Open dropDown when function finishes
conguero23 free asked 4 years ago
Expected behavior How can I open a drop-down from a different component. I have a component where I have my navbar that has an icon that opens a dropdown menu. I want to be able to open the dropdown pragmatically.
Thank Actual behavior
Resources (screenshots, code snippets etc.)
Magdalena Dembna staff answered 4 years ago
We don't have such functionality now, but it's a good idea for a feature. You have to trigger a click event on the dropdown's toggle to achieve this effect:
<template>
<mdb-dropdown>
<mdb-dropdown-toggle ref="toggle" color="primary" slot="toggle">Basic dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item href="#">Action</mdb-dropdown-item>
<mdb-dropdown-item href="#">Another action</mdb-dropdown-item>
<mdb-dropdown-item href="#">Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item href="#">Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</template>
<script>
import {
mdbDropdown,
mdbDropdownToggle,
mdbDropdownMenu,
mdbDropdownItem
} from "mdbvue";
export default {
name: "DropdownPage",
components: {
mdbDropdown,
mdbDropdownToggle,
mdbDropdownMenu,
mdbDropdownItem
},
mounted() {
this.$refs.toggle.$el.click();
}
};
</script>
Kind regards, Magdalena
conguero23 free commented 4 years ago
Thank You this works. IS there any way to call this.$refs.toggle.$el.click(); from another component?
Magdalena Dembna staff commented 4 years ago
There are several ways, it really depends on your structure. For example, you could create a property toggleDropdown
, pass it as a prop, create a watcher for its value and then call this method once it changes. Best regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.6.0
- Device: Web
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No