0

I'm using vuetify v-tab component, each tab represents another component. The issue is that in the first time I move to the second tab the component is refreshed again.

How can I prevent the refresh?

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>

Script

export default {
  components: { TeamActions, TeamHistory },
  name: "TeamManagement",
  data: () => ({
    team: "",
    waitingIcon: false,
    tab: 0,
    componentKey: 0,
    teamTabs: [{ tab: "History" }, { tab: "Run Process" }]
  })
};
Doto Pototo
  • 686
  • 2
  • 9
  • 19
user13982200
  • 13
  • 1
  • 5
  • one potential solution is to put the components in a list and loop through them so you only have a single component in your for loop. Or remove the v-tab-item v-for and just have v-tab-item tags around team-history and team-actions respectively – depperm Jul 23 '20 at 11:48
  • I removed the v-tab-item v-for and used only the v-tab-items and it works, thanks! – user13982200 Jul 23 '20 at 12:22

1 Answers1

1

As depperm wrote, I removed the v-tab-item v-for and used only the v-tab-items, and it works.

 <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>
user13982200
  • 13
  • 1
  • 5
  • to explain this, the refresh is caused by the change of `:key` in `tab-item` don't key it, if you don't want it to be refreshing! – MushyPeas Mar 22 '21 at 21:44