Search code examples
vuejs2navigation-drawervuetify.jsnavigationbarappbar

@click.stop="drawer = !drawer" does not work in vuetify


So,i am trying to use the toggle functionality in navigation drawer in Vueitify , when d user clicks on the nar bar icon(hamburger menu) den the drawer shpuld open,on clicking back again it should close ,but this is not working . I use this @click.stop="drawer = !drawer" still it just opens n not closes back I have attached the image for reference.


Solution

  • Here is the working codepen: https://codepen.io/chansv/full/abvWXaR

    <div id="app">
      <v-app id="inspire">
          <v-navigation-drawer v-model="drawer" clipped style="padding-top: 65px;">
    
            <v-list
              dense
              nav
            >
              <v-list-item
                v-for="item in items"
                :key="item.title"
                link
              >
                <v-list-item-icon>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-icon>
    
                <v-list-item-content>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-navigation-drawer>
        <v-app-bar
          app
          color="indigo"
          dark
        >
          <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
          <v-toolbar-title>Application</v-toolbar-title>
        </v-app-bar>
        </v-card>
      </v-app>
    </div>
    
    
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data () {
        return {
          drawer: null,
          items: [
            { title: 'Dashboard', icon: 'mdi-view-dashboard' },
            { title: 'Photos', icon: 'mdi-image' },
            { title: 'About', icon: 'mdi-help-box' },
          ],
          right: null,
        }
      },
    })