Javascript 嵌套的v形选项卡：有条件地渲染子选项卡以显示滑块

我使用嵌套选项卡，但在显示活动选项卡时遇到问题

如本节所述，嵌套选项卡的选项卡滑块仅在单击后显示

建议使用条件渲染作为解决方案。我已经尝试了一些解决方案，但没有收到效果

复制链接：

---

非常感谢您的帮助。

必须在父级的基础上进行有条件渲染。必须将父选项卡的v-tabs v-model与父选项卡的v-tab-item的v-for循环中的索引进行比较

在这种情况下：

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>

{{n.text}}
第一个孩子
第二胎
导出默认值{
名称：“应用程序”，
数据（）{
返回{
类类型：[{id:1，文本：“第一”}，{id:2，文本：“第二”}，
活动类：“1”，
activeTab:[]
};
}
};

复制链接：