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
            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"/>
    1. tab panels
        <q-tab-panels v-model="page"
                      class="full-width bg-transparent"
          <q-tab-panel name="page-1">
          <q-tab-panel name="page-2">
          <q-tab-panel name="page-3">
    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 . otherwise make a reproduction codepen.

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


  • @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