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

时间:2019-04-17 21:54:16

标签: javascript visual-studio vue.js vuetify.js v-navigation-drawer

我是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>

0 个答案:

没有答案