can't understand q-tab component

[alexe2baranov]

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>

[rstoenescu]

Hi. Here’s an example: https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/layout/tabs.vue

[alexe2baranov]

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

[s.molinari]

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

Scott

[alexe2baranov]

<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

[rstoenescu]

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.

[druppy]

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

[jonafrank]

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

[rstoenescu]

@jonafrank set a Vue reference through “ref” prop.