Vuetify navigation drawer closing only after item is clicked twice

Question

I'm very new to Vue so I'm not sure how to check this, but my vue v-navigation-drawer is below, it's located in app-root.vue. It was working at first, closing when you click on a drawer item, but now you have to click twice in order for it to close.

The first click takes you to the page and then the second click closes the drawer. FYI - if I'm already on the page then clicking it once will close it.

I don't see any errors in the debugger.

Here is 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>

Answer 1

I changed the drawer: @click.stop to @click.native and now works.

Answer 2

It is true that you used Vuex. But if you do not want to double-click, you can do the following:

step 1) Import the v-click-outside directive from Vuetify and stop and start your system once.

step 2) In addition to the methods you defined in HTML, create another method for this directory that I mentioned, such as the following:

<v-list-tile 
@click="drawer = !drawer" 
***v-click-outside="onClickOutside" 
to="/entry/records">
 <v-list-tile-content>
<v-list-tile-title>Records</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

step 3) Define the following method once for this as follows:

onClickOutside() {
  this.$store.commit('appRoot/isPageLoadingUpdate', value)
},

step 4) There is only one thing to note that if drawer: false, was, you must prevent the method from running. Like the following code:

onClickOutside() {
if (drawerAction === true) { 
this.$store.commit('appRoot/isPageLoadingUpdate', value)}
},