vue.js - Vuetify v-tab 在选项卡之间导航时防止组件刷新

Question

我正在使用 vuetify v-tab 组件，每个选项卡代表另一个组件。问题是，在我第一次移动到第二个选项卡时，组件再次刷新。

如何防止刷新？

HTML

<v-tabs v-model="tab">
  <v-tab v-for="teamTab in teamTabs" :key="teamTab.index">
    <span>{{teamTab.tab }}</span>
  </v-tab>
</v-tabs>
<v-tabs-items v-model="tab" >
  <v-tab-item v-for="teamTab in teamTabs" :key="teamTab.index">
    <team-history
      v-show="tab==0"
      :team="TeamName"
      @WaitingIcon="waitingIcon? waitingIcon=false : waitingIcon=true"
      :key="componentKey"
    ></team-history>
    <team-actions
      v-show="tab==1"
      @waitingIcon="waitingIcon? waitingIcon=false : waitingIcon=true"
      @historyTab="tab=0"
      :team="TeamName"
      :key="componentKey"
    ></team-actions>
  </v-tab-item>
</v-tabs-items>

脚本

export default {
  components: { TeamActions, TeamHistory },
  name: "TeamManagement",
  data: () => ({
    team: "",
    waitingIcon: false,
    tab: 0,
    componentKey: 0,
    teamTabs: [{ tab: "History" }, { tab: "Run Process" }]
  })
};

Answer 1

正如 depperm 所写，我删除了 v-tab-item v-for 并仅使用了 v-tab-items，它可以工作。

 <v-tabs 
    v-model="tab"
  >
    <v-tab v-for="teamTab in teamTabs" :key="teamTab.index">
      <span
      >{{teamTab.tab }}</span>
    </v-tab>
  </v-tabs>
  <v-tabs-items v-model="tab" >
      <team-history
        v-show="tab==0"
        :team="TeamName"
        @WaitingIcon="waitingIcon? waitingIcon=false : waitingIcon=true"
        :key="componentKey"
      ></team-history>
      <team-actions
        v-show="tab==1"
        @waitingIcon="waitingIcon? waitingIcon=false : waitingIcon=true"
        @historyTab="tab=0"
        :team="TeamName"
        :key="componentKey"
      ></team-actions>
  </v-tabs-items>