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

[lawrence615]

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>

2. 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>

3. 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.

[metalsadman]

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

[s.molinari]

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

Scott

[lawrence615]

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

[lawrence615]

@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

[metalsadman]

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