Question

我使用了嵌套标签，但无法显示活动标签。

如本bug report中所述，嵌套选项卡的选项卡滑块仅在单击后才显示。

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

复制链接： https://codesandbox.io/s/xr7q9zl1qo

感谢您的帮助。

Answer 1

条件渲染必须在父项的基础上进行。必须将父级选项卡的v-tabs v模型与父级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>

复制链接：https://codesandbox.io/s/lykynjn6vm

嵌套的v标签：有条件地渲染子标签以显示滑块

1 个答案: