How can I load the content from scratch on each tab click when using v-tabs in vuejs

Question

Problem Statement :

I'm using v-tabs feature in my vue.js project. I want the content to be run over and over again every time I click on the tab.

Template :

<template>
  <v-card>
    <!-- add tab feture -->
    <v-tabs color="#F65C38" left v-model="tab">
      <v-tab v-for="item in items" :key="item.tab">
        {{ item.tab }}
      </v-tab>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <v-tab-item v-for="item in items" :key="item.tab">
        <v-card flat>
          <v-card-text>
            <component v-bind:is="item.content"></component>
          </v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-card>
</template>

Data :

tab: null,
items: [
  { tab: 'tab1', content: 'test1' },
  { tab: 'tab2', content: 'test2' },
  { tab: 'tab3', content: 'test3' },
],

For example, when I first open the page and click on tab 1, I switch to tab 2 and when I click on tab 1 again, the content is not called again, the old one appears.

Answer 1

Since you have your component inside a for loop, every element is already rendered and the v-tab just controls what is displayed.

But you can use v-tab without v-tabs-items. With the v-model tab you can control which component the component should be.

Your example would look like this:

<template>
  <v-card>
    <!-- add tab feture -->
    <v-tabs color="#F65C38" left v-model="tab">
      <v-tab v-for="item in items" :key="item.tab">
        {{ item.tab }}
      </v-tab>
    </v-tabs>
    <v-card flat>
      <v-card-text>
        <component v-bind:is="items[tab].content" :key="tab"></component>
      </v-card-text>
    </v-card>
  </v-card>
</template>