VueJS结合Vuetify实现不同标签页展示不同内容的问题求助

嘿，我猜你大概率是在v-tab-item的配置上出了问题——Vuetify的标签页需要让v-tab的href和对应v-tab-item的id严格匹配，同时确保每个标签页的内容是独立的。我来给你拆解一下问题和修复方案：

常见问题原因 #

• 所有v-tab-item的id重复，或者和v-tab的href不对应
• 错误地在所有标签页中复用了同一个组件/数据变量
• v-model绑定的变量没有正确初始化或关联

修复后的完整代码示例 #

<template>
  <v-card>
    <v-tabs 
      centered 
      color="deep-purple accent-1" 
      slot="extension" 
      slider-color="yellow" 
      v-model="activeTab"
    >
      <!-- 每个v-tab的href对应下方v-tab-item的id -->
      <v-tab href="#tab-1">Solar Panels</v-tab>
      <v-tab href="#tab-2">CCTV Panels</v-tab>
      <v-tab href="#tab-3">Third Tab</v-tab>
    </v-tabs>

    <!-- 标签页内容容器 -->
    <v-tabs-items v-model="activeTab">
      <!-- 第一个标签页内容 -->
      <v-tab-item id="tab-1">
        <v-card-text>
          <h3>太阳能面板专属内容</h3>
          <p>这里放太阳能面板相关的所有信息...</p>
        </v-card-text>
      </v-tab-item>

      <!-- 第二个标签页内容 -->
      <v-tab-item id="tab-2">
        <v-card-text>
          <h3>监控面板专属内容</h3>
          <p>这里放CCTV面板的配置、功能说明...</p>
        </v-card-text>
      </v-tab-item>

      <!-- 第三个标签页内容 -->
      <v-tab-item id="tab-3">
        <v-card-text>
          <h3>第三个标签页内容</h3>
          <p>这是第三个标签的独立内容...</p>
        </v-card-text>
      </v-tab-item>
    </v-tabs-items>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      // 初始化激活的标签，对应tab的id
      activeTab: 'tab-1'
    }
  }
}
</script>

关键注意点 #

• 匹配ID与Href：每个v-tab的href="#tab-x"必须和对应的v-tab-item的id="tab-x"完全一致，Vuetify靠这个关联标签和内容
• 独立内容区域：确保每个v-tab-item内部的内容是独立的——不要在多个标签页里用同一个组件实例（比如如果用自定义组件，要确保每个标签页都是新的实例，或者通过props传递不同数据）
• 正确绑定v-model：v-tabs和v-tabs-items要绑定同一个变量（比如示例里的activeTab），这样才能同步激活状态

你可以对照自己的代码检查这几点，尤其是v-tab-item的id是否和v-tab的href一一对应，以及内容是否重复复用了同一个区块。

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