DemoTabsDynamic.vue
593 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script setup>
const totalTabs = ref(3)
const currentTab = ref(0)
watch(totalTabs, newValue => {
currentTab.value = newValue - 1
})
</script>
<template>
<VTabs v-model="currentTab">
<VTab
v-for="n in totalTabs"
:key="n"
:value="n"
>
Tab {{ n }}
</VTab>
</VTabs>
<!-- buttons -->
<div class="text-center mt-9">
<VBtn
:disabled="!totalTabs"
variant="text"
@click="totalTabs--"
>
Remove Tab
</VBtn>
<VBtn
variant="text"
@click="totalTabs++"
>
Add Tab
</VBtn>
</div>
</template>