How to open a Drawer from a Toolbar?



  • I need to know how to access a Drawer component from another Toolbar component, in order to open and close the Drawer. Here is my components, i.e. App.vue:

    <template>
      <!-- Don't drop "q-app" class -->
      <div id="q-app">
        <q-layout>
          <toolbar slot="header"></toolbar>
          <drawer></drawer>
          <div class="layout-view">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
        </q-layout>
      </div>
    </template>
    
    <script>
    import Toolbar from './components/layout/toolbar/Toolbar.vue'
    import Drawer from './components/layout/drawer/Drawer.vue'
    
    export default {
      components: {
        'toolbar': Toolbar,
        'drawer': Drawer
      }
    }
    </script>
    
    <style></style>
    

    Toolbar.vue

    <template>
      <div class="toolbar">
        <button
          class="hide-on-drawer-visible"
          @click="drawer.open()"
        >
          <i>menu</i>
        </button>
        <q-toolbar-title :padding="1">
          BuyMore Admin
        </q-toolbar-title>
        <button>
          <i>account_circle</i>
        </button>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {}
      },
      computed: {
        drawer () {
          return this.$parent.$children[1].$refs.leftDrawer
        }
      }
    }
    </script>
    
    <style lang="styl">
    </style>
    

    Drawer.vue

    <template>
      <q-drawer ref="leftDrawer">
        <div class="list platform-delimiter">
          <div class="toolbar light">
            <div class="toolbar-content">
              <div class="toolbar-title padding-1">
                <div>
                  Administration
                </div>
              </div>
            </div>
          </div>
          <q-drawer-link icon="dashboard" to="/">Dashboard</q-drawer-link>
          <q-drawer-link icon="assignment_ind" to="/customers">Customers</q-drawer-link>
          <q-drawer-link icon="wc" to="/employees">Employees</q-drawer-link>
          <q-drawer-link icon="kitchen" to="/services">Services</q-drawer-link>
          <q-drawer-link icon="alarm" to="/shifts">Shifts</q-drawer-link>
          <q-drawer-link icon="monetization_on" to="/transactions">Transactions</q-drawer-link>
          <q-drawer-link icon="people" to="/users">Users</q-drawer-link>
          <div class="list-label">
            Accounts
          </div>
          <q-drawer-link icon="settings" to="/settings">Settings</q-drawer-link>
        </div>
      </q-drawer>
    </template>
    
    <script>
    export default {
      data () {
        return {}
      }
    }
    </script>
    
    <style lang="styl">
    </style>
    


  • This is very strange but it seems like restarting my dev server did the trick!