Vue多标签页同类型子组件切换时数据异常问题求助

问题原因拆解 #

1. 数据绑定错配：你给表单绑定的name是openTabs[activeModel].name，但activeModel是标签栏的绑定值，如果它对应的是标签索引，当标签顺序变动或切换时，这个索引对应的项不一定是当前标签页的item，自然会显示错误数据。
2. 组件复用残留旧数据：你用activeTab.type === 'blocks' && item.type === 'blocks'判断渲染表单，Vue会复用相同类型的组件，切换到其他类型标签再切回时，旧表单数据未被清空，就会串到新标签里。
3. 状态不同步：点击标签时setActiveTab只更新了activeTab，但activeModel未同步，导致标签栏的激活状态和内部表单的判断逻辑对不上。

具体修复步骤 #

1. 绑定正确的表单数据 #

直接绑定当前循环的item.name，每个标签页对应自身的item，从根源避免数据错配：

<BlockForm
  :key="item.id"
  v-if="item.type === 'blocks'"
  :name="item.name"
  :activeProject="activeProject"
/>
<ItemForm
  :key="item.id"
  v-if="item.type === 'items'"
  :name="item.name"
  :projectName="activeProject"
/>

2. 简化渲染判断逻辑 #

v-tabs-items会根据activeModel只显示激活的标签页，内部无需再判断activeTab.type，仅依据当前item的类型渲染表单即可，避免组件复用的坑。

3. 同步标签激活状态 #

在setActiveTab中把activeModel同步设为当前item的id（若activeModel绑定的是索引则改为对应索引值），确保标签栏和内容区的激活状态完全一致：

setActiveTab: function(item) {
  this.activeTab = item;
  this.activeType = item.type;
  this.activeModel = item.id; // 同步激活状态
}

4. 给表单加唯一标识 #

给不同类型的表单key添加前缀，比如block-${item.id}、item-${item.id}，让Vue能准确区分不同类型的表单实例，彻底避免复用旧组件：

<BlockForm :key="`block-${item.id}`" ... />
<ItemForm :key="`item-${item.id}`" ... />

修改后的核心代码 #

<v-tabs
  dark
  background-color="blue-grey darken-4"
  show-arrows
  height="30"
  v-model="activeModel"
  class="fixed-tabs-bar"
  v-if="openTabs.length"
>
  <v-tabs-slider color="accent"></v-tabs-slider>

  <v-tab v-for="item in openTabs" :key="item.id" class="pr-0 white--text" color="accent" active-class="" @click="setActiveTab(item)">
    <template class="white--text text-capitalize">
      <v-icon>{{ item.icon }}</v-icon>
      &nbsp;
      {{ item.name }}
      <div v-if="item.changes">*</div>
      <v-btn plain width="10" class="px-0" @click="closeTab(item.id)">
        <v-icon dark small width="10">mdi-close</v-icon>
      </v-btn>
    </template>
  </v-tab>
</v-tabs>
<v-tabs-items v-model="activeModel" style="background-color: #232323;">
  <v-tab-item v-for="item in openTabs" :key="item.id" style="height: 100%" :transition="false" eager>
    <BlockForm
      :key="`block-${item.id}`"
      v-if="item.type === 'blocks'"
      :name="item.name"
      :activeProject="activeProject"
    />
    <ItemForm
      :key="`item-${item.id}`"
      v-if="item.type === 'items'"
      :name="item.name"
      :projectName="activeProject"
    />
    <!-- 更多表单类型 -->
  </v-tab-item>
</v-tabs-items>

setActiveTab: function(item) {
  this.activeTab = item;
  this.activeType = item.type;
  this.activeModel = item.id;
}

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