javascript - 嵌套的 v-tabs : Conditionally render the child tabs in order to show slider

Question

我使用嵌套选项卡，但在显示事件选项卡时遇到问题。

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

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

转载链接: https://codesandbox.io/s/xr7q9zl1qo

我很感激任何帮助。

Answer 1

条件渲染必须在parent的基础上进行。父选项卡的 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>

转载链接:https://codesandbox.io/s/lykynjn6vm