Vuetify切换标签页时内容不更新问题求助

你的Vuetify标签页组件无法正常切换内容，核心原因是组件结构不符合Vuetify 3的规范，具体问题如下：

• 你将v-window放在了v-card-text内部，导致组件联动时出现样式或逻辑层面的异常——虽然v-model绑定正确，但内容切换时因高度塌陷或组件层级问题无法显示新内容。
• Vuetify 3中，标签页的内容区域（无论是官方推荐的v-tabs-items还是v-window）需要与v-tabs保持正确的层级关联，不能被无关容器随意包裹。

修正方案一：使用官方推荐的标签页结构（优先选择） #

Vuetify 3官方推荐用v-tabs-items和v-tab-item搭配v-tabs实现标签页，结构更清晰且兼容性更好：

完整代码 #

const {createApp, ref} = Vue;
const {createVuetify} = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    selectedtab: 'one'
  })
});

app.use(vuetify).mount('#app')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

<div id="app">
  <v-card>
    <v-tabs v-model="selectedtab">
      <v-tab value="one">Tab One</v-tab>
      <v-tab value="two">Tab Two</v-tab>

      <!-- 内容区域直接放在v-tabs内部 -->
      <v-tabs-items v-model="selectedtab">
        <v-tab-item value="one">
          Tab One content
        </v-tab-item>
        <v-tab-item value="two">
          Tab Two content
        </v-tab-item>
      </v-tabs-items>
    </v-tabs>
  </v-card>
</div>

修正方案二：保留v-window的调整方案 #

如果坚持使用v-window，只需移除v-card-text包裹，或给v-window设置明确高度即可：

完整代码 #

// JS代码不变
const {createApp, ref} = Vue;
const {createVuetify} = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    selectedtab: 'one'
  })
});

app.use(vuetify).mount('#app')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

<div id="app">
  <v-card>
    <v-tabs v-model="selectedtab">
      <v-tab value="one">Tab One</v-tab>
      <v-tab value="two">Tab Two</v-tab>
    </v-tabs>

    <!-- 移除v-card-text，或给v-window设置最小高度 -->
    <v-window v-model="selectedtab" style="min-height: 80px;">
      <v-window-item value="one">
        Tab One content
      </v-window-item>
      <v-window-item value="two">
        Tab Two content
      </v-window-item>
    </v-window>
  </v-card>
</div>

内容的提问来源于stack exchange，提问作者Ferry van de Graaf