Probably a silly question but how do i access setActiveTab() method available in q-tabs ?

  • Ah awesome ! Thanks … I used Vue.children[0].setActiveTab , should have used $refs … Thanks 🙂 👍

  • @rstoenescu , A small confusion

    I am using router linked tabs , I am calling the setActiveTab function but it still does not select the tab , Is it a bug by any chance or is it a intended behavior ?

  • Admin

    @jonafrank if you are using router linked tabs then the router is in charge of the active tab. change route to change active tab.

  • Ah got it ! Can we point multiple routes for the same tab ? If so how can it be done ? I have a specific use case where i need to configure so

  • Admin

    @jonafrank Not really possible to target multiple routes. How would the component know which route to trigger when clicked/tapped?

  • Click operation can be bound to the primary route , Add-on routes can be configured to take up the same target selection. I will probably change it to be a nested route instead , Should resolve the issue . The problem now is that , it has been configured as a separate route and I want the same tab to be highlighted .

  • @rstoenescu hi… this doesnt seem to work for me …on v0.13.6… been trying all day… any help?
    relevant code below…

    <q-tabs :refs="$refs"  vmodel="xTabsModel" slot="header">
        <q-tab icon="fingerprint" name="credits_tab">
            Buy Credits
            <button @click="goToPayTab()" class="positive float-right">
                Select Package
        <q-tab icon="alarm" name="pay_tab">
            Previous Transactions
    <!-- Targets  for tabs -->
    <div class="layout-padding">
        <div ref="credits_tab">
           <div class="card">
                       Credits Tab
        <div ref="pay_tab">
            <div class="card">
                  Pay Tab

    <script type=“text/javascript”>
    vm = new Vue({
    el : “#app”,
    data : {
    xTabsModel : “credits_tab”,
    methods : {
    goToPayTab : function(){



  • Admin

    goToPayTab() { this.xTabsModel = 'pay_tab' }

  • hmmm.still doesnt seem to work…will try other things and get back

  • Hi, It will work,
    declare xTabsModel:credits_tab in data property
    In method
    this.xTabsModel = pay_tab
    This will work:)

Log in to reply