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



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


Log in to reply