vue.js - Vuetify 导航抽屉开始关闭,然后一秒钟后打开
问题描述
我在 NuxtJS 上设置了一个 Vuetify Navigation Drawer,使用 Vuex 来处理抽屉的状态。一切正常,除了一个问题——即,当我在桌面上加载页面时,抽屉开始关闭,然后一瞬间打开。这是我在努力刷新的视频,看看我指的是什么: https ://www.loom.com/share/477eb0933b3840d2bf7a9b55aaa8e934
这是我的代码:
//app-bar.vue
<template>
<v-app-bar app color="indigo" dark>
<v-app-bar-nav-icon @click.stop="mainDrawer = !mainDrawer" />
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
</template>
<script>
export default {
computed: {
mainDrawer: {
get() {
return this.$store.getters.getMainDrawer;
},
set(value) {
this.$store.dispatch("toggleMainDrawer", value);
}
}
}
};
</script>
// nav-drawer.vue
<template>
<v-navigation-drawer v-model="mainDrawer" app>
<v-list dense>
...LIST_ITEMS
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
computed: {
mainDrawer: {
get() {
return this.$store.getters.getMainDrawer;
},
set(value) {
this.$store.dispatch("toggleMainDrawer", value);
}
}
}
};
</script>
// index.js (vuex file)
import Vuex from "vuex";
const createStore = () => {
return new Vuex.Store({
state: {
mainDrawer: null
},
getters: {
getMainDrawer: state => state.mainDrawer
},
mutations: {
toggleMainDrawer(state, value) {
state.mainDrawer = value;
}
},
actions: {
toggleMainDrawer({ commit }, value) {
commit("toggleMainDrawer", value);
}
}
});
};
export default createStore;
知道为什么会发生这种情况以及我可以做些什么来改变它。我应该注意,当我使用 Android Studio Emulator 运行页面时,它工作得很好。我只有台式机有问题。
谢谢。
解决方案
我有同样的问题并尝试了很多方法来解决它。到目前为止,我发现的唯一方法是使用名为disable-resize-watcher
. 它的默认值为 false,因此当您出于某种原因重新加载页面时,导航抽屉会打开。将此道具的值设置为 true 将解决问题。
推荐阅读
- javascript - 输入只允许写入 1 个符号
- python - ValueError:模型的特征数量必须与输入匹配。模型 n_features 为 3,输入 n_features 为 2
- r - R 多列的频率表,按第三个变量分组
- google-maps-api-3 - 谷歌距离矩阵和 OR 工具
- python - 嵌套序列化程序 Django REST Framework 时排除字段
- javascript - 在 React 从多个相等的输入中获取信息并保存信息
- git - 如何告诉我的 git 工具不要转换行尾?
- postgresql - 如何通过 AIRFLOW 将 GCP Postgres sql 中的数据导出到 GCS 中的 csv 文件?
- loops - 是否可以在使用批处理文件运行循环时检查按键?
- python - 将列表列表转换为元组的元组