Vuetify 导航抽屉仅在单击两次后才关闭

Question

我对 Vue 很陌生，所以我不知道如何检查这个，但是 我的 vue v-navigation-drawer 在下面，它位于 app-root.vue 中。起初它可以工作，当您单击抽屉项目时关闭，但现在您必须单击两次才能关闭它。

第一次单击将您带到页面，然后第二次单击关闭抽屉。仅供参考 - 如果我已经在页面上，然后单击它一次将关闭它。

我在调试器中没有看到任何错误。

这是我的抽屉和脚本

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

我将抽屉：@click.stop 更改为 @click.native，现在可以使用了。