Vuex에서 Vuetify 탐색 드로어가 표시되지 않음

Vuex에서 Vuetify 탐색 드로어가 표시되지 않음

햄버거 메뉴를 클릭해서 Vuetify 내비게이션 드로어를 열려고 합니다.지금까지 앱 컴포넌트에는 2개의 하위 컴포넌트가 있습니다.<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 부분이 올바르게 동작하고 있음을 알 수 있으며, 이를 반영하여 올바르게 업데이트됨을 알 수 있습니다.sideBarOpenfalse 또는 true 중 하나입니다.

햄버거를 클릭하여 sideBarOpen이 참임을 확인하고 DOM을 검사하면,transform: translateX(-300px)스타일은 전혀 변하지 않고, 실제로 그 속성을 삭제하면 드로어가 뷰로 올바르게 이동하는 것을 볼 수 있습니다.

무슨 문제인지 아무리 생각해도 알 수 없지만, 뭔가 간단한 것 같은 느낌이 듭니다.비슷한 문제에 부딪힌 사람이 있나요?

* Navbar 포함 편집.표시하다

해라v-model='showSideBar''v-show'가 아니라소품value실제로 와 연결되어 있습니다.v-model지시. v-show당신의 서랍이 없었다면 작동했을 것이다.temporary,그렇지만temporary서랍이 있다transformCSS 값을 음수 값으로 설정하면 드로어를 표시하여 표시할 때까지 뷰에서 '숨김'할 수 있습니다.value을 지지하다.true.

이걸 가지고 놀다가 바꿔서temporary로 지시하는.permanent,v-show와 함께v-model및 그thingdata 변수.

주의: 설정하셔야 합니다.v-model이내에v-navigation-drawer,것은 아니다.drawer고객의 가치 전달 방법에 따라 달라집니다.showSideBar단, 단,Drawer컴포넌트 자체는 사용하지 않습니다.v-model이외에는 어떤 방법으로도v-navigation-drawer이에요.

언급URL : https://stackoverflow.com/questions/55643867/vuetify-navigation-drawer-doesnt-show-with-vuex