Going back to tab loses the active tab



  • I have been trying to figure out how to make a tab sticky once I have navigated to a new page and then go back in history.

    Say I am on a page that contains q-tabs and q-tab-panels. Once the page is first loaded a default tab is set to active using v-model on q-tabs. When I navigate away and then go back, the same (default) tab is set as active, although I was in fact on a different tab before I navigated away. I would like that when I go back the same tab shows as active.

    Below a simplified version of my code to demonstrate the issue.

        <q-tabs
          v-model="tab"
          flat
          align="justify"
          active-color="primary"
          indicator-color="secondary"
         >
          <q-tab exact name="tab1" label="Tab 1" icon="some-icon"/>
          <q-tab exact name="tab2" label="Tab 2" icon="some-icon"/>
          <q-tab exact name="tab3" label="Tab 3" icon="some-icon"/>
        </q-tabs>
    
        <q-tab-panels v-model="tab" class="bg-white">
    
          <q-tab-panel name="tab1">
            <q-list
                separator
                class="bg-white">
    
              <some-component v-for="datablock in datablocks" :key="block.id" :props="datablock"></some-component>
    
            </q-list>
          </q-tab-panel>
    
        ...
    
        </q-tab-panels>
    
    
        export default {
          data() {
    
            return {
              tab: 'active-loads', // This is the default active tab
            }
          }
        }
    

    Each one of the instances of some-component can be clicked on and then navigate to another page at /block/:id. On that page I have a link that has a @click="$router.go(-1)" action. When I click on that link I am indeed taken back to the page that contains the q-tabs, alas to the ‘default’ tab and not the one that was active before I navigated away. I cannot seem to be able to figure out to render the last active tab as active when I go back to the q-tabs page. Any ideas?

    Any help very much appreciated.



  • @afotoglidis use vuex to store your last active tab state.



  • I see, thanks for the tip. I’m not experienced with Vuex, does it persist state between page reloads and/or moving back and forth between different layouts?



  • @afotoglidis nope it doesn’t, but you can use a vuex plugin called vuex-persistedstate to store your states in localStorage https://github.com/robinvdvleuten/vuex-persistedstate.



  • @metalsadman I see, after a quick look seems like it’s the solution to my issue. Thanks for the help!


Log in to reply