Навигационный ящик Vuetify не отображается с Vuex - PullRequest
Новая
       17

Навигационный ящик Vuetify не отображается с Vuex

1 голос
/ 12 апреля 2019

Я пытаюсь открыть окно навигации 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>

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

Глядя на devtools Vue / Vuex, я могу сказать, что часть вещей Vuex работает правильно и правильно обновляет состояние, отражая, что sideBarOpen является либо ложным, либо истинным.

Когда я нажимаю на гамбургер иубедитесь, что sideBarOpen имеет значение true, и осмотрите DOM, мне кажется, что стиль transform: translateX(-300px) вообще не меняется, и фактически, когда я удаляю это свойство, я вижу, как выдвижной ящик правильно отображается.

vuetify drawer

Я не могу понять для себя, в чем проблема, но я чувствую, что это что-то простое.Кто-нибудь сталкивался с подобной проблемой?

* Отредактировано, чтобы включить Navbar.vue

1 Ответ

0 голосов
/ 12 апреля 2019

Попробуйте v-model='showSideBar' вместо 'v-show'. Опора value на самом деле связана с директивой v-model. v-show будет работать, если ваш ящик не был temporary, но у temporary ящиков будет установлено значение transform CSS, равное вашему отрицательному значению, чтобы «скрыть» его от просмотра, пока вы не отобразите ящик, установив его value опора до true.

Поиграйте с этим и измените директиву temporary с permanent, v-show с v-model и переменной данных thing.

Обратите внимание, вам нужно установить v-model в пределах v-navigation-drawer, а не drawer. Вам решать, как вы передаете значение showSideBar, но просто обратите внимание, что сам компонент Drawer не использует v-model в любом случае, но v-navigation-drawer - это.

...