No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    1
    1
    442
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      PatientZero last edited by

      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 :|

      1 Reply Last reply Reply Quote 0
      • First post
        Last post