Planteamiento del problema :
Estoy usando la función v-tabs en mi proyecto vue.js. Quiero que el contenido se reproduzca una y otra vez cada vez que haga clic en la pestaña.
Modelo :
<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>Datos :
tab: null, items: [ { tab: 'tab1', content: 'test1' }, { tab: 'tab2', content: 'test2' }, { tab: 'tab3', content: 'test3' }, ],Por ejemplo, cuando abro la página por primera vez y hago clic en la pestaña 1, cambio a la pestaña 2 y cuando vuelvo a hacer clic en la pestaña 1, el contenido no se vuelve a llamar, aparece el anterior.
Dado que tiene su component dentro de un bucle for, cada elemento ya está representado y la v-tab solo controla lo que se muestra.
Pero puede usar v-tab sin v-tabs-items . Con la tab v-model puede controlar qué component .
Su ejemplo se vería así:
<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>