3. SideDrawer are disable, by return on same page (using Vuex)

SideDrawer are disable, by return on same page (using Vuex)

  • P

    Hi Community,

    i’m fresh with Quasar (and Vue.js) and absolutly with Vuex.

    I have an Layout, using the SideDrawer Quasar Component, this works absolutly fine.
    The “visual” state will managed by an Vuex Store, this work also fine.
    In the Header vue i have this two button, to do close an open the two SideDrawer, either works fine.

    Actualy, all works fine. But:
    The left SideDrawer are default “on”, also visible, but when i left this side and go back to the last (with the Drawer), the Drawer are disabled. (The state seems to be “false”, because, when i click on the button, the Drawer opens without any problems.)

    Unfortunately i have no errors in the console and this problem seems no one have befor in the internet ^^

    following a part of Code:

    mutations.js (Vuex Store):

    export const updateLeftIndexDrawerState = (state, opened) => {
    state.leftIndexDrawerState = opened
    }

    state.js (Vuex Store):
    leftIndexDrawerState: true

    The Header vue
    ***<template>
    <q-layout-header v-model=“header”>
    <!-- First row of header is a QToolbar -->
    <q-toolbar>
    <q-btn flat round dense @click=“leftIndexDrawerState = !leftIndexDrawerState” icon=“menu”/>
    <q-toolbar-title>Layout Header <span slot=“subtitle”>Optional subtitle</span> </q-toolbar-title>
    <q-btn flat round dense @click=“rightIndexDrawerState = !rightIndexDrawerState” icon=“menu”/>
    </q-toolbar>
    </q-layout-header>
    </template>

    <script>
    export default {
    data () {
    return {
    header: ‘’
    }
    },
    computed: {
    leftIndexDrawerState: {
    get () { return this.$store.state.layoutStore.leftIndexDrawerState },
    set (val) { this.$store.commit(‘layoutStore/updateLeftIndexDrawerState’, val) }
    },
    rightIndexDrawerState: {
    get () { return this.$store.state.layoutStore.rightIndexDrawerState },
    set (val) { this.$store.commit(‘layoutStore/updateRightIndexDrawerState’, val) }
    }
    }
    }
    </script>

    The SideDrawer vue

    <template>
    <q-layout-drawer side=“left” v-model=“leftIndexDrawerState”>
    <indexNavTree />
    </q-layout-drawer>
    </template>

    <script>
    import indexNavTree from '…/…/components/trees/indexNavTree’
    export default {
    computed: {
    leftIndexDrawerState: {
    get () { return this.$store.state.layoutStore.leftIndexDrawerState },
    set (val) { this.$store.commit(‘layoutStore/updateLeftIndexDrawerState’, val) }
    }
    },
    components: {
    indexNavTree
    }
    }
    </script>***

    Can anyone finde a mistake on it?
    THX and sorry for my english :|

    0