Есть обычный vuetify табы в которых по нажатию таба рендерится компонент, но вот проблема в том что при какой то не ведомой мне причине при нажатии на все табы один компонент будет рендерится столько раз сколько и табов(((
App.js
<template>
<div id="app">
<v-row>
<v-col>
<v-sheet elevation="0" style="max-width: 700px">
<v-tabs
v-model="tab"
next-icon="mdi-arrow-right-bold-box-outline"
prev-icon="mdi-arrow-left-bold-box-outline"
show-arrows
>
<v-tabs-slider></v-tabs-slider>
<v-tab
v-for="item in items"
:key="item.title"
@click="currentTabComponent = item.routeName"
>
{{ item.title }}
</v-tab>
</v-tabs>
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col>
<v-tabs-items v-model="tab" class="test">
<v-tab-item v-for="item in items" :key="item.title">
<v-card color="basil" flat>
<v-card-text>
<component v-bind:is="currentTabComponent"></component>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-col>
</v-row>
</div>
</template>
<script>
import one from "./One";
import two from "./Two";
import tree from "./Tree";
import four from "./Four";
export default {
name: "App",
components: {
one,
two,
tree,
four
},
data: () => ({
currentTabComponent: "one",
tab: null,
items: [
{
routeName: "one",
title: "1111",
},
{
routeName: "two",
title: "222",
},
{
routeName: "tree",
title: "333",
},
{
routeName: "four",
title: "444",
},
],
}),
};
</script>
Любой из этих компонентов:
<template>
<div>
Four
</div>
</template>
<script>
export default {
name: 'Four',
created() {
this.init();
},
methods: {
init() {
console.log('Four');
}
}
}
</script>
В консоле:
One
Two.vue?bffe:14 Two
Two.vue?bffe:14 Two
(2)Four.vue?8941:14 Four
Four.vue?8941:14 Four
(3)Tree.vue?8774:14 Tree
Tree.vue?8774:14 Tree
(4)Two.vue?bffe:14 Two
(4)One.vue?79da:14 One
(4)Four.vue?8941:14 Four
(4)Tree.vue?8774:14 Tree