Vuetify框架v-tabs组件运行后内容不显示问题求助

问题原因 #

• v-tabs 组件未绑定 v-model 跟踪激活状态，无法判定当前需要渲染的对应内容
• v-tab-item 需放置在 v-tabs 组件内部，和对应 v-tab 做关联，放在外部无法被组件识别渲染

修复后代码 #

按索引关联（简单场景可用）

<template>
  <div>
    <v-tabs v-model="activeTab" fixed-tabs> 
      <v-tab>Reservas</v-tab>
      <v-tab>Reservar</v-tab>

      <v-tab-item> Any content </v-tab-item>
      <v-tab-item> Any Content too </v-tab-item>
    </v-tabs>
  </div>
</template>

<script>
export default {
  name: "Reservations",
  data() {
    return {
      // 默认激活第一个标签，索引从0开始计数
      activeTab: 0
    }
  }
}
</script>

<style>

</style>

按value关联（后续调整标签顺序不会错乱，更稳妥）

<template>
  <div>
    <v-tabs v-model="activeTab" fixed-tabs> 
      <v-tab value="reservas">Reservas</v-tab>
      <v-tab value="reservar">Reservar</v-tab>

      <v-tab-item value="reservas"> Any content </v-tab-item>
      <v-tab-item value="reservar"> Any Content too </v-tab-item>
    </v-tabs>
  </div>
</template>

<script>
export default {
  name: "Reservations",
  data() {
    return {
      activeTab: 'reservas'
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Augusto