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.$refs.drawer.open() ? 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

    <template>
    <div id=“q-app”>
    <q-layout>
    <div slot=“header” class=“toolbar”>
    <button class=“hide-on-drawer-visible” @click="$refs.leftDrawer.open()"><i>menu</i></button>
    <q-toolbar-title :padding=“1”>Title</q-toolbar-title>
    </div>
    <wis-sidebar></wis-sidebar>
    </q-layout>
    </div>
    </template>

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

    <template>
    <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>
    </q-collapsible>
    <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>
    </router-link>
    </div>
    </div>
    </q-drawer>
    </template>

    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.