Vue tabs multiple of same child component type wrong data-CodePudding

I have tabs which display forms. There are different types of forms, and each type of form can be open in its own tab 0 to X times. The issue is specifically when there are more than one of the same type of form open, plus at least one other type open:

In this scenario, when I change from Item Two back to Item One, the form shows the name prop from Item Two.

Here's how the tabs are setup:

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

  <v-tab v-for="item in openTabs" :key="item.id"  color="accent" active- @click="setActiveTab(item)">
    <template >
      <v-icon>
        {{ item.icon }}
      </v-icon>
      &nbsp;
      {{ item.name }}
      <div v-if="item.changes">*</div>
      <v-btn plain width="10"  @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="item.id"
      v-if="activeTab.type === 'blocks' && item.type === 'blocks'"
      :name="openTabs[activeModel].name"
      :activeProject="activeProject"
    />
    <ItemForm :key="item.id" v-if="activeTab.type === 'items' && item.type === 'items'" :name="openTabs[activeModel].name" :projectName="activeProject" />
   ... More form types ...
   </v-tab-item>
</v-tabs-items>

And set looks like:

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

The name prop is specifically what is wrong in the data.

CodePudding user response：

<v-tab-item v-for="item in openTabs" :key="item.id" style="height: 100%" :transition="false" eager>
    <BlockForm
      :key="item.id"
      v-if="activeTab.type === 'blocks' && item.type === 'blocks'"
      :name="openTabs[activeModel].name"
      :activeProject="activeProject"
    />
    <ItemForm :key="item.id" v-if="activeTab.type === 'items' && item.type === 'items'" :name="openTabs[activeModel].name" :projectName="activeProject" />
   ... More form types ...
   </v-tab-item>

The main problem is that when you set the activeTab variable, the v-tab-item element is not re-rendered. Because you are using item-id as key. You can use nextTick or directly apply the solution below.

You can take a look at Vue reactivity

:key="`${activeTab.id}-${item.id}`"