Nuxt 和 Vuetify。导航抽屉母鹿

Posted 2023-02-16

【中文标题】Nuxt 和 Vuetify。导航抽屉母鹿

【英文标题】：Nuxt and Vuetify. navigation drawer doe

【发布时间】：2020-01-16 01:00:32

【问题描述】：

一个星期以来，我一直在努力解开这个谜团。

我正在尝试在我的 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】：

由于临时道具，当您在外部单击时抽屉会关闭。根据您的代码，您的状态仅在单击汉堡按钮时才会更改。但在内部 vuetify 使用临时属性。您可以不使用 vuex 代码或不使用临时属性。

【讨论】：

你是不是建议不要切换侧边栏，而只是有一个方法来打开侧边栏并允许点击外部关闭它？

是的。让图标只打开侧边栏，然后隐藏图标。这是可以在 google play 应用上看到的。