How to change a tab from a q-tab-panel



  • I have q-tabs and q-tab-panels, multiple q-tab and q-tab-panel within each respectively. I am looking for a way to switch to a different tab from a q-tab-panel. I have tried to emit different events (@slide, @change, @input) but none is been received in the parent view which hosts the structure. Below is my implementation;

    1. tabs
          <q-tabs
            v-model="page"
            no-caps
            active-color="white"
            active-bg-color="indigo"
            indicator-color="transparent"
            class="bg-transparent text-indigo shadow-2">
            <q-tab :ripple="false" name="page-1" label="1"/>
            <q-tab :ripple="false" name="page-2" label="2"/>
            <q-tab :ripple="false" name="page-3" label="3"/>
          </q-tabs>
    
    1. tab panels
        <q-tab-panels v-model="page"
                      animated
                      class="full-width bg-transparent"
                      @slide="moveTo"
                      @change="moveTo"
                      @input="moveTo">
          <q-tab-panel name="page-1">
            <page1></page1>
          </q-tab-panel>
          <q-tab-panel name="page-2">
            <page2></page2>
          </q-tab-panel>
          <q-tab-panel name="page-3">
            <page3></page3>
          </q-tab-panel>
        </q-tab-panels>
    
    1. model
    ...
    
    data() {
          return {
            page: 'page-1'
          }
        },
    ...
    

    I have tried to fire an event from a q-tab-panel so that I can mutate the page model to a different tab but not working;

            this.$emit('slide', 'slide')
            this.$emit('change', 'change')
            this.$emit('input', 'input')
    

    Kindly assist.



  • @lawrence615 see the examples https://quasar.dev/vue-components/tab-panels#Example--With-QTabs . otherwise make a reproduction codepen.



  • Are you trying to manipulate the tab selection outside of the tabs?

    Scott



  • @s-molinari Yes, that’s exactly what am trying to achieve. Select a different tab by an event and not clicking or touch



  • @metalsadman I have gone through this and there’s no solution to my problem. What am trying to achieve is, moving to a tab without touching or clicking to it. Something like taking a user to the first tab after going through all tabs automatically



  • @lawrence615 check the api docs methods section, there are methods there to navigate your tabs programmatically.


Log in to reply