v-tabs-slider가 작동하지 않는 경우 v-tabs-slider를 사용하여 Vuetify하시겠습니까?

v-tabs-slider가 작동하지 않는 경우 v-tabs-slider를 사용하여 Vuetify하시겠습니까?

VueRouter 및 Vuex에서 Vuetify 0.16을 사용하고 있으며 v-if vs-show에서 v-tabs-slider에서 v-tabs를 사용할 때 문제가 발견되었습니다.

<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, showTab 및 탭은 vuex 스토어의 getter를 참조하는 계산된 변수입니다.

v-show를 사용하는 위의 코드에서는 v-tabs-slider를 포함한 모든 것이 정상적으로 동작합니다.단, showTabs가 false일 경우 탭을 위한 공간(heigh-wise)은 여전히 존재합니다.툴바는 무조건 표시하고 싶지만 루트에 따라 탭 표시를 제어하고 그 공간을 차지하는 것은 바람직하지 않습니다(특히 모바일의 경우).

v-if를 사용하도록 변경하면 높이 문제가 해결되고 v-tabs-slider는 처음에 v-tabs-bar가 로드될 때만 작동한다는 점(showTabs가 true가 될 때)을 제외하고 모두 작동합니다.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>

이게 버그인지 아니면 제가 잘못 사용하고 있는 건지...

아는 사람이 있나요?

언급URL : https://stackoverflow.com/questions/47460995/vuetify-v-tabs-slider-with-v-if-not-working