CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Anand Tangri
Anand Tangri

Reputation: 71

Navigation drawer misbehaving in VueJS

I am creating a VueJS single page app which has a navigation drawer at the left. I have created a parent component which contains this navigation drawer and is used in all the child components. Following is the code for navigation drawer:

<v-navigation-drawer fixed v-model="drawer" app>
  <v-flex
    xs12
    sm6
    md8
    text-xs-center
    layout
    align-center
    justify-center
  >
  </v-flex>
</v-navigation-drawer>

now I am using this icon to open/close the drawer from toolbar:

<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>

and in the script tag

data () {
   return {
     drawer: false
   }
}

I want to keep the drawer closed whenever a component is loaded being a single page app. It works fine on the initial start with "drawer" value being false. But when child components are loaded the drawer also opens. How can I prevent this drawer to open automatically when a child component loads through router-view?

Upvotes: 2

Views: 1192

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

Add the disable-route-watcher prop on to <v-navigation-drawer>

<v-navigation-drawer disable-route-watcher fixed v-model="drawer" app>
    ...
</v-navigation-drawer>

This disables opening of navigation drawer when route changes. Reference to the API

Upvotes: 2

Related Questions