auto scroll to de last q-tab



  • I want to auto scroll to de last tab on my application.
    I’m using v-model to set a q-tab selected.
    Any idea?
    <q-tabs :class="preference" v-model="tab"> <q-tab v-for=" __tab in tabs" :ref="__tab.name" :name="__tab.name" :icon="__tab.icon" :route="__tab.route">{{__tab.name}} </q-tab> </q-tabs>

    data () => ({tab: 'tab20' tabs: [{name: 'tab1' ,..... name: 'tab20' ...}]});



  • Hello. You can set a function in a vue-router redirect. so something like

    var routes = [
    {
      path: 'parentRoute',
      component: myComponent,
      children: [
        {
          path: 'tab1'
          component: tabComponent1
        },
        {
          path: 'tab2'
          component: tabComponent2
        },
    ...
        {
          path: 'tab20'
          component: tabComponent20
        },
        {
          path: ''
          redirect: () => {
            // set the route you want
            return 'tab20'
          }
        },
      ]
    }
    ...
    ]
    
    


  • In this case, i’m not using a router. When i select a tab using v-model, with many tabs, the display don’t scroll to it. But I keep trying here



  • Are you saying you use the tabs to scroll on the same page? This is not exactly what tabs are for… Also, 20 tabs on the same page? I would suggest using different pages and vuex if you need a shared state. But I am sure you can get it to work. You need:

    • To set q-tab selected manually
    • To watch for page scrolling and set/unset q-tab selected
    • To scroll to the appropriate parte of the page when a q-tab is clicked using @click

    Good luck


  • Admin

    What version are you on? This issue can’t happen in v0.14.



  • I’m sorry. Probably my problem occour because another problem. This is working now.