CODEWITHSUNDEEP
vuejs2navigation-drawervuetify.jsnavigationbarappbar
Puja
Puja

Reputation: 101

@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.

Upvotes: 1

Views: 1711

Answers (1)

chans
chans

Reputation: 5260

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,
    }
  },
})

Upvotes: 2

Related Questions