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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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