Вложенные v-вкладки: условно отображать дочерние вкладки, чтобы показать слайдер - PullRequest
Новая
       20

Вложенные v-вкладки: условно отображать дочерние вкладки, чтобы показать слайдер

0 голосов
/ 20 апреля 2019

Я использую вложенные вкладки, и у меня возникают проблемы с отображением активных вкладок.

Как описано в этом отчете об ошибке , бегунок вкладок вложенных вкладок отображается только после того, как вы нажали на него.

В качестве решения предлагается условный рендеринг.Я уже попробовал некоторые решения, но не получил рабочего результата.

Воспроизведение Ссылка: https://codesandbox.io/s/xr7q9zl1qo

Я благодарен за любую помощь.

1 Ответ

0 голосов
/ 20 апреля 2019

Условный рендеринг должен выполняться на основе родительского элемента. V-модель v-вкладок родительской вкладки должна сравниваться с индексом из цикла v-for элемента v-tab родительского элемента.

В этом случае: 

v-if="activeClass === index"

Пример: 

<template>
<div id="app">
<v-tabs v-model="activeClass" slider-color="blue">
  <v-tab v-for="n in classTypes" :key="n.id" ripple>{{ n.text }}</v-tab>
  <v-tab-item v-for="(n, index) in classTypes" :key="n.id">
    <v-tabs v-model="activeTab[index]" slider-color="blue" v-if="activeClass === index">
      <v-tab>First child</v-tab>
      <v-tab>Second child</v-tab>
    </v-tabs>
  </v-tab-item>
</v-tabs>
</div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {
    classTypes: [{ id: 1, text: "First" }, { id: 2, text: "Second" }],
    activeClass: "1",
    activeTab: []
  };
 }
};
</script>

Ссылка на репродукцию: https://codesandbox.io/s/lykynjn6vm

...