vue.js - Vuetify 选项卡，在 v-tab 构造上将所有选项卡主体填充到 html dom 中

Question

我有一组 Vuetify 选项卡。我的问题是我需要在创建标签集的同时构建标签内容。

当我在 devtools 中查看页面的 HTML 时，我看到默认选项卡的选项卡正文显示，但其他选项卡的正文为空，直到选择了选项卡。

(和 FWIW，选择选项卡后，选项卡正文仍然存在 - 它不会被删除)。

我的页面上还有其他组件正在生成插入到选项卡正文中的内容。因此，如果选项卡主体不存在，则无法插入内容。

示例代码:

<v-tabs
  background-color="transparent"
  color="basil"
  grow
>
  <v-tab>Tab 1</v-tab>
  <v-tab>Tab 2</v-tab>
  <v-tab>Tab 3</v-tab>

  <v-tab-item>
    <v-card flat color="basil">
      <v-card-text>
        First tab contents
      </v-card-text>
    </v-card>
  </v-tab-item>
  <v-tab-item>
    <v-card flat color="basil">
      <v-card-text>
        Second tab contents
      </v-card-text>
    </v-card>
  </v-tab-item>

  <v-tab-item>
    <v-card flat color="basil">
      <v-card-text>
        Third tab contents
      </v-card-text>
    </v-card>
  </v-tab-item>

</v-tabs>

显示选项卡主体的开发工具的快速屏幕截图尚未为选项卡 2 和 3 加载。

Answer 1

从 vuetify 2 开始，您必须使用 eager 明确告诉选项卡在挂载时加载其内容。属性(property)。

<v-tab-item :eager="true">
    First Tab
<v-tab-item>