Question

我将Vuetify 0.16与VueRouter和Vuex一起使用，并注意到使用带有v-tabs-slider的v-tabs与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和tabs是在我的vuex商店中引用getter的计算变量。

使用v-show上面的代码，一切都运行良好，包括v-tabs-slider;但是，当showTabs为false时，标签（高度）的空间仍然存在。我希望工具栏无论如何显示，但我想根据路线控制选项卡的显示，并且不希望占用该空间（特别是对于移动设备）。

如果我将其更改为使用v-if，高度问题将得到解决，除了v-tabs-slider仅在最初加载v-tabs-bar时（当showTabs变为true时），v-tabs-slider才有效。当showTabs变为false然后再次变为true时，不再显示v-tabs-slider。活动标签的图标和文本正确突出显示，但v-tabs-slider在卸载并重新加载后不会突出显示。

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

我不确定这是不是一个错误，或者我是不是没有正确使用它...

有人知道吗？

使用v-vuetify v-tabs-slider如果不工作？

0 个答案: