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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.