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!


Log in to reply
 

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