0

vuetify v-tab コンポーネントを使用しています。各タブは別のコンポーネントを表します。問題は、最初に 2 番目のタブに移動すると、コンポーネントが再び更新されることです。

更新を防ぐにはどうすればよいですか?

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" }]
  })
};
4

1 に答える 1

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>
于 2020-07-23T12:28:09.330 に答える