Open dropDown when function finishes

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

conguero23 commented 5 years ago

Thank You this works. IS there any way to call this.$refs.toggle.$el.click(); from another component?

---

Magdalena Dembna staff premium commented 5 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

---