Vuetify v-tab 在选项卡之间导航时防止组件刷新答案

【问题标题】：Vuetify v-tab preventing components refresh when navigating between tabsVuetify v-tab 在选项卡之间导航时防止组件刷新
【发布时间】：2020-07-23 11:37:07
【问题描述】：

我正在使用 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" }]
  })
};

【问题讨论】：

一种可能的解决方案是将组件放在一个列表中并循环遍历它们，这样您的 for 循环中就只有一个组件。或者删除 v-tab-item v-for 并分别在 team-history 和 team-actions 周围添加 v-tab-item 标签
我删除了 v-tab-item v-for 并只使用了 v-tab-items 并且它有效，谢谢！

标签： vue.js vue-component vuetify-tabs

【解决方案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>

【讨论】：

解释一下，刷新是由tab-item中的:key的变化引起的，如果你不想刷新就不要key！