Vuetify v-tabs-slider with v-if not working?

Viewed 1840

I'm using Vuetify 0.16 with VueRouter and Vuex and noticing an issue using v-tabs with the v-tabs-slider with v-if vs v-show.

<v-tabs icons grow light centered v-model="activeTab">
  <v-toolbar>
  ...
    <v-tabs-bar v-show="showTabs" class="grey lighten-4" slot="extension">
      <v-tabs-slider color="primary"></v-tabs-slider>
      <v-tabs-item v-for="tab in tabs" :key="tab.name" :id="tab.name" :to="tab.to" class="primary--text" router>
        <v-icon>{{tab.icon}}</v-icon>
        {{tab.name}}
      </v-tabs-item>
    </v-tabs-bar>
  </v-toolbar>
</v-tabs>

activeTab, showTabs, and tabs are computed variables that reference getters in my vuex store.

With the code above using v-show, everything works well, including the v-tabs-slider; however, when showTabs is false, the space for the tabs (heigh-wise) is still present. I want the toolbar to show no matter what, but I want to control the display of tabs depending on the route and taking up that space is not desirable (especially for mobile).

If I change it to use v-if, the height issue is resolved and everything works except that the v-tabs-slider only works when the v-tabs-bar is initially loaded (when showTabs becomes true). When showTabs becomes false and then becomes true again, the v-tabs-slider no longer displays. The active tab's icon and text highlight correctly, but the v-tabs-slider does not highlight after it is unloaded and reloaded.

<v-tabs icons grow light centered v-model="activeTab">
  <v-toolbar>
  ...
    <v-tabs-bar v-if="showTabs" class="grey lighten-4" slot="extension">
      <v-tabs-slider color="primary"></v-tabs-slider>
      <v-tabs-item v-for="tab in tabs" :key="tab.name" :id="tab.name" :to="tab.to" class="primary--text" router>
        <v-icon>{{tab.icon}}</v-icon>
        {{tab.name}}
      </v-tabs-item>
    </v-tabs-bar>
  </v-toolbar>
</v-tabs>

I'm not sure if this is a bug or if I'm just not using this correctly...

Does anyone know?

0 Answers
Related