can't understand q-tab component



  • I try to output tariffs inside tabs component like this but unsuccessfully. Can you tell me where is my mistake please

    <q-tabs :refs="$refs" v-model="TARIFF">
      <q-tab v-for="eachTariff in tariffs" :name="'tab'+eachTariff.value" icon="message" >
        {{eachTariff.label}}
      </q-tab>
    </q-tabs>
    <!-- Targets -->
    <div v-for="eachTariff in tariffs" :ref="'tab'+eachTariff.value">
      {{eachTariff.description}}
    </div>

  • Admin



  • @rstoenescu
    yes I see it. i tryed this example and it works very well. but i need dynamic tabs. can you explain me why my code nod works?



  • I’d like to know this too, as I’d like to implement a dynamic navigation at some point.

    Scott



  • <q-tabs :refs="$refs" v-model=“TARIFF”>
    <q-tab v-for=“eachTariff in tariffs” :name="‘tab’+eachTariff.value" icon=“message” >
    {{eachTariff.label}}
    </q-tab>
    </q-tabs>
    <!-- Targets -->
    <div v-for=“eachTariff in tariffs” :ref="‘tab’+eachTariff.value">
    {{eachTariff.description}}
    </div>

    this markup creates tabs with correct labels = eachTariff.label but this tabs are not switchable


  • Admin

    Hi, sorry but don’t have time at the moment to investigate your case. Tabs are going to suffer a refactoring to make it very easy to manage them and avoid Vue $refs side-effects like yours.



  • Hi …

    We have build a simple navigation slot inside q-layout using a dynamic structure much like yours, like this :

     <q-tabs slot="navigation" class="gt-sm" default>
         <q-tab v-for="menuLink in menuLinks" :route="menuLink.path" :icon="menuLink.icon" :exact='menuLink.exact'>
                    {{menuLink.name}}
         </q-tab>
     </q-tabs>
    

    And this works nicly, but there are 3 things to notice :

    • it must be a navigation slot insite q-layout
    • ours use route not name (don’t know if both works)
    • carefully consider the use of prop exact

    Hope this helps


Log in to reply
 

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