Vuetify Navigation Drawer 不与 Vuex 一起显示

Question

我正在尝试通过单击汉堡菜单打开 Vuetify 导航抽屉。到目前为止，我有一个带有两个子组件的应用程序组件，<navbar/> 和 <drawer/>。

<template>
   <v-app>
     <navbar/>
     <drawer v-show='showSideBar'/>
     <router-view></router-view>
   </v-app>
</template>

<script>
  import { mapState, mapActions, mapGetters } from 'vuex';
  import Navbar from '@/_components/Navbar/Navbar';
  import Drawer from '@/_components/Drawer/Drawer';

  export default {
    name: "app",
    computed: {  
      ...mapGetters('navbar', {
        showSideBar: 'g_sideBarOpen',
      })
    },
    components: {
      Navbar,
      Drawer,
    }
  };
</script>

Navbar.vue：

<template>
    ...
    <v-toolbar-side-icon 
      :ripple='false'
      @click.stop='toggleSideBar'
    ></v-toolbar-side-icon>
</template>

<script>
  import { mapState, mapActions } from 'vuex';

  export default {
    data: () => ({
      items: [
        { 
          title: 'Profile',
          url  : '/profile',
        },
        { 
          title: 'Logout',
          url  : '/login',
        },
      ],
    }),
    components: {
      Logo,
    },
    computed: {
      ...mapState({
        account: state => state.account,
      }),  
    },
    methods: {
      ...mapActions('navbar', [
        'toggleSideBar',
      ]),
    }
  }
</script>

抽屉.vue：

<template>
  <v-navigation-drawer absolute temporary>
    <v-list class="pa-1">
      <v-list-tile avatar>
        <v-list-tile-avatar>
          <img src="https://randomuser.me/api/portraits/men/85.jpg">
        </v-list-tile-avatar>

        <v-list-tile-content>
          <v-list-tile-title>John Leider</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>

    <v-list class="pt-0" dense>
      <v-divider></v-divider>

      <v-list-tile v-for="item in items" :key="item.title">
        <v-list-tile-action>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-tile-action>

        <v-list-tile-content>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          title: "Profile",
          url: "/profile"
        },
        {
          title: "Logout",
          url: "/login"
        }
      ]
    })
  };
</script>

我的navbar.module.js如下：

const state = {
  sideBarOpen: false,
};

const getters = {
  g_sideBarOpen(state) {
    return state.sideBarOpen
  }
};

const actions = {
  toggleSideBar({ commit }) {
    commit('toggleSideBar');
  },
};

const mutations = {
  toggleSideBar(state) {
    state.sideBarOpen = !state.sideBarOpen;
  }
};

export const navbar = {
  namespaced: true,
  state,
  actions,
  getters,
  mutations,
};

查看 Vue/Vuex 开发工具，我可以看出 Vuex 部分工作正常并且状态正确更新以反映 sideBarOpen 是假还是真。

当我单击汉堡包并验证 sideBarOpen 是否为真并检查 DOM 时，在我看来 transform: translateX(-300px) 样式根本没有改变，事实上，当我删除该属性时，我可以看到抽屉正确移动到视野中。

我一生都无法弄清楚问题是什么，但我觉得这很简单。有没有人遇到过类似的问题？

*已编辑以包含 Navbar.vue

Answer 1

尝试v-model='showSideBar' 而不是“v-show”。道具value 实际上与v-model 指令相关联。如果您的抽屉不是temporary，v-show 将起作用，但temporary 抽屉将其transform CSS 值设置为您的负值以“隐藏”它，直到您通过设置其@987654329 显示抽屉@prop 到 true.

尝试使用this 并将temporary 指令更改为permanent，将v-show 更改为v-model 和thing 数据变量。

注意，您需要在v-navigation-drawer 中设置v-model，而不是drawer。如何传递showSideBar 的值取决于您自己，但请注意Drawer 组件本身并没有以任何方式使用v-model，而是v-navigation-drawer 使用。