Vue.js Vuetify导航抽屉不'；不能用Vuex显示

我试图让Vuetify导航抽屉在点击汉堡菜单时打开。到目前为止，我已经有了一个应用程序组件，它有两个子组件，

和

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

查看Vue/Vuex开发工具，我可以看出Vuex部分工作正常，状态正确更新以反映

sideBarOpen

为假或真

当我单击汉堡包并验证sideBarOpen是否为true并检查DOM时，我觉得

transform:translateX（-300px）

样式根本没有改变，事实上，当我删除该属性时，我可以看到抽屉正确地移动到视图中

我一辈子都搞不清楚问题是什么，但我觉得这很简单。有人遇到过类似的问题吗

---

*编辑为包含Navbar.vue

尝试

v-model='showSideBar'

而不是'v-show'。prop

值实际上与
v-model
指令相关联<如果您的抽屉不是
临时的
，code>v-show将起作用，但是
临时的
抽屉将其
转换
CSS值设置为负值，以“隐藏”它，直到您通过将其
值设置为
真
来显示抽屉

使用
permanent
，
v-show
使用
v-model
和
thing
数据变量来处理和更改
临时
指令

注意，您需要在
v-navigation-drawer
中设置
v-model
，而不是
drawer
。如何传递
showSideBar
的值取决于您，但请注意，
Drawer
组件本身并没有以任何方式使用
v-model
，而是使用
v-navigation-Drawer
。
我对vuetify.js不太熟悉，但是我不知道
v-show
如何影响抽屉组件的
transform
css属性
v-show
仅更改是否显示组件（使用css
display
属性），并且是可用于所有组件的指令。你确定你使用的是正确的抽屉道具吗？很好，我想我在某个教程中看到了这一点。Vuetify示例使用
v-model=“”
来显示它，它们的导航抽屉api显示控制可见性的道具“值”。虽然我已经尝试过这两种方法，但无论出于何种原因，似乎都没有出现在我身上。那么……您的
Drawer
组件是什么样子的？Vuetify似乎只有
v-navigation-drawer
我已经用drawer更新了我的帖子。哇，好了！我将抽屉html粘贴到App.vue中进行测试，并添加了
v-model='showSideBar'
，它似乎可以工作了！我需要弄清楚如何将它传递给抽屉组件，但这超出了这个问题的范围。谢谢你的帮助！
<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>

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

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,
};