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.
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>