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

[jonafrank]

I need to problematically set the tab in some scenarios, But not able to get the access hook to set it

[rstoenescu]

@jonafrank set a Vue reference through “ref” prop and you’ll have $refs.<refName>

[jonafrank]

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

[jonafrank]

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

[rstoenescu]

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

[jonafrank]

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

[rstoenescu]

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

[jonafrank]

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 .

[2kodes]

@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
        </button>
    </q-tab>
    <q-tab icon="alarm" name="pay_tab">
        Previous Transactions
    </q-tab>
</q-tabs>
<!-- Targets  for tabs -->
<div class="layout-padding">

    <div ref="credits_tab">
       <div class="card">
                   Credits Tab
        </div>
    </div>

    <div ref="pay_tab">
        <div class="card">
              Pay Tab
       </div>
     </div>
    </div>

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

}

})
</script>

[rstoenescu]

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

[2kodes]

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

[Swathi]

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