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>

Drawer.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 devtools，我可以判断出Vuex部分工作正常且状态正确更新以反映sideBarOpen为假或真。

当我单击汉堡包并确认sideBarOpen为true，并检查DOM时，我发现transform: translateX(-300px)样式完全没有改变，实际上，当我删除该属性时，我可以看到抽屉正确地移入视野。

我一生都想不出问题是什么，但是我觉得这很简单。有人遇到过类似的问题吗？

*已编辑以包含Navbar.vue

Answer 1

尝试使用v-model='showSideBar'而不是“ v-show”。道具value实际上绑定到v-model指令。如果您的抽屉不是v-show，则temporary可以工作，但是temporary抽屉会将其transform的CSS值设置为负值，以将其“隐藏”起来，直到您看到为止通过将其value道具设置为true来显示抽屉。

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

请注意，您需要在v-model而非v-navigation-drawer中设置drawer。由您决定如何传递showSideBar的值，但请注意，Drawer组件本身并未以任何方式使用v-model，而v-navigation-drawer却没有使用。

Vuetify导航抽屉未与Vuex一起显示

1 个答案: