Nuxt和Vuetify。导航抽屉doe
Nuxt和Vuetify。导航抽屉doe
提问于 2019-09-14 20:55:09
我已经试着解开这个谜团一周了。
我正尝试在我的Nuxt/Vue网站上用Vuetify设置一个侧边栏，人们点击汉堡菜单，侧边栏就会打开。为此，我将汉堡菜单设置为运行切换方法。
<v-app-bar-nav-icon @click="toggleSidebar"></v-app-bar-nav-icon>
......
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations({
toggleSidebar: 'appSidebar/toggleSidebar'
})
}
}
</script>然后，该方法更新vuex状态
export const state = () => ({
sidebarOpen: false
})
export const mutations = {
toggleSidebar(state) {
state.sidebarOpen = !state.sidebarOpen;
},
}这可以很好地工作。当我点击汉堡包菜单时，酒吧就会打开和关闭。然而，由于某种原因，当我在工具条之外点击时，工具条就会关闭，这一点我很高兴(如果有人能解释一下这是如何工作的，我将不胜感激)。当这种情况发生时，状态不会更新，下一次我想要打开时，我需要在菜单上点击两次，让它回到关闭状态，然后再次打开。
这就是我设置侧边栏的方式
<v-app>
<v-navigation-drawer app temporary clipped v-model="status" color="blue lighten-3" dark>
<script>
export default {
computed: {
status (){
return this.$store.state.appSidebar.sidebarOpen
}
}
}
</script>谢谢你的帮助!
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-14 21:03:38
由于临时道具的原因，当您在外部单击时，抽屉将关闭。根据您的代码，只有在单击汉堡包按钮时，您的状态才会更改。但在内部vuetify使用临时属性。您可以不使用vuex代码，也可以不使用临时道具。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57935691
复制相关文章
相似问题
腾讯云开发者
