I am brand new to Vue and struggling to figure out why my vue v-navigation-drawer is not working properly. It is located in app-root.vue and was initially closing when clicking on a drawer item, but now requires two clicks to close.
After the first click, it navigates to the page and only closes the drawer with the second click. Interestingly, if I'm already on the page, a single click will close it.
I have checked the debugger for errors but did not find any.
Below is the code for my drawer and script:
export default {
data() {
return {
drawer: false,
}
},
computed: {
isPageLoading: {
get() {
return this.$store.state.appRoot.isPageLoading
},
set(value) {
this.$store.commit('appRoot/isPageLoadingUpdate', value)
}
},
}
}<template>
<div id="app">
<v-app id="inspire">
<v-navigation-drawer fixed temporary disable-resize-watcher v-model="drawer" app>
<v-subheader class="mt-3 grey--text text--darken-1">ENTRY</v-subheader>
<v-list dense>
<v-list-tile @click="drawer = !drawer" to="/entry/records">
<v-list-tile-content>
<v-list-tile-title>Records</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/coworkers">
<v-list-tile-content>
<v-list-tile-title>Coworkers</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/defendants">
<v-list-tile-content>
<v-list-tile-title>Defendants</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/documentjobs">
<v-list-tile-content>
<v-list-tile-title>Document Jobs</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/jobsites">
<v-list-tile-content>
<v-list-tile-title>Jobsites</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/locations">
<v-list-tile-content>
<v-list-tile-title>Locations</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/products">
<v-list-tile-content>
<v-list-tile-title>Products</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer =
!drawer" to="/entry/ships">
<v-list-tile-content>
<v-list-tile-title>Ships</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/sources">
<v-list-tile-content>
<v-list-tile-title>Sources</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/witnesses">
<v-list-tile-content>
<v-list-tile-title>Witnesses</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-divider dark></v-divider>
<v-subheader class="mt-3 grey--text text--darken-1">ADMIN</v-subheader>
<v-list-tile @click="drawer = !drawer" to="/Admin/Users">
<v-list-tile-content>
<v-list-tile-title>Users</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<br />
</v-list>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Mpid2</v-toolbar-title>
</v-toolbar>
<v-content>
<router-view></router-view>
</v-content>
<v-footer fixed app height="auto" style="min-height: 0">
<!--<v-progress-linear :active="isPageLoading" class="ma-0" :indeterminate="true"></v-progress-linear>-->
</v-footer>
</v-app>
</div>
</template>