SideDrawer are disable, by return on same page (using Vuex)
-
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: trueThe 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 :|