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



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


  • Admin

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



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



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


  • Admin

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



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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.