Opening the left drawer from within another component?

[robmpreston]

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.

[rstoenescu]

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

[robmpreston]

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

[rstoenescu]

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.

[joshbodine]

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?

[rstoenescu]

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.

[joshbodine]

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?

[joshbodine]

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.