Q-route-tab with Q-tab-panel: how to set active tab



  • I have a button, for jumping to the Q-tab-panels layout, and I made it jumping to the first tab’s page.

    <q-btn round @click="toUser()" unelevated>
    //script
    toUser(){
          this.$router.push({
            name: 'UserInfo',
            params:{ uId: this.uId}
          })
        },
    
    {
            path:'/user',
            component: () => import('layouts/UserLayout'),
            children: [
              {
                name: 'UserInfo',
                path: '/user/info/:uId',
                component: () => import('pages/User/UserInfo')
              },
        ]
    }
    
    <!--the layout page-->
    <q-page>
        <q-splitter
          v-model="splitterModel"
        >
          <template v-slot:before style="width: 30%">
            <q-tabs
                v-model="routeName"
                vertical
                class="text-blue-grey-13"
                active-color="blue-grey-14"
              >
                <q-route-tab v-for="r in routeList" :key="r.name" :name="r.name"
                             :to="{name: r.name, params:r.params}" :icon="r.icon" :label="r.label" />
            </q-tabs>
          </template>
    
          <template v-slot:after>
            <q-tab-panels v-model="routeName">
              <q-tab-panel :name="routeName">
                <router-view />
              </q-tab-panel>
            </q-tab-panels>
          </template>
        </q-splitter>
      </q-page>
    //script
    computed: {
        routeName() {
          return this.$route.name
        },
    }
    

    I clicked the button- the page content was right, but the first tab was not active. Only after I clicking a tab, that tab became active.
    I want to make the first tab active when I click the button.
    Thank you very much.



  • @kelly7 routetabs should do this automatically. Try removing

    v-model="routeName"
    

    and

    :name="r.name"
    


  • @beets Thank you. But this didn’t work.😢


Log in to reply