Opening the left drawer from within another component?

  • Dumb question, wasn’t quite clear from the docs. If I have a left drawer and I want to open it within a page…

    i.e. my page has a “Show Score” button which then slides out the menu, how would I handle that? Everything I’ve tried has failed.

  • Admin

    Use a v-ref on the drawer and call open() method on it. Let me know if you stumble into problems.

  • So put a v-ref on the <quasar-drawer> then call this.$ ? If so I get undefined

  • Admin

    Copy paste your template so I can see how you’re using it. There must be something wrong with the template or the method calling open() on the v-ref.

  • What if I have a custom component that I place the q-drawer component into and then import that custom component to my App.vue. From within my App.vue file how do I have the button there open the drawer that is within my imported custom component?

  • Admin

    Use reference on the Drawer in your component and add a method to open it within your component. Then you can call it from where you use the component.

  • For my App.Vue I have

    <div id=“q-app”>
    <div slot=“header” class=“toolbar”>
    <button class=“hide-on-drawer-visible” @click="$"><i>menu</i></button>
    <q-toolbar-title :padding=“1”>Title</q-toolbar-title>

    Within the “wis-sidebar” component above, I then have the drawer with the ref:

    <q-drawer ref=“leftDrawer”>
    <div class=“list”>
    <div v-for=“item in items”>
    <q-collapsible v-if=“item.items” group=“sidebar” :icon=“item.icon” :label=“item.label”>
    <router-link v-for=“subItem in item.items” tag=“div” class=“item item-link” :to=“subItem.route” exact>
    <i class=“item-primary”>{{ subItem.icon }}</i>
    <div class=“item-content”>{{ subItem.label }}</div>
    <router-link v-else tag=“div” class=“item item-link” :to=“item.route” exact>
    <i class=“item-primary”>{{ item.icon }}</i>
    <div class=“item-content”>{{ item.label }}</div>

    I’m not sure how I would add a method in the component to open it from the click of the button within the App.vue above?

  • Never mind, I realized my mistake. In the code above I needed to add ref=“leftDrawer” to the “wis-sidebar” component in App.vue and not to the drawer within the component itself. Thanks for the help.

Log in to reply