39 lines
721 B
Vue
39 lines
721 B
Vue
|
<script setup>
|
||
|
|
const totalTabs = ref(3)
|
||
|
|
const currentTab = ref(0)
|
||
|
|
|
||
|
|
watch(totalTabs, newValue => {
|
||
|
|
currentTab.value = newValue - 1
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<VCard>
|
||
|
|
<VTabs v-model="currentTab">
|
||
|
|
<VTab
|
||
|
|
v-for="n in totalTabs"
|
||
|
|
:key="n"
|
||
|
|
:value="n"
|
||
|
|
>
|
||
|
|
Tab {{ n }}
|
||
|
|
</VTab>
|
||
|
|
</VTabs>
|
||
|
|
|
||
|
|
<!-- buttons -->
|
||
|
|
<VCardText class="text-center d-flex items-center gap-y-2 flex-wrap">
|
||
|
|
<VBtn
|
||
|
|
:disabled="!totalTabs"
|
||
|
|
class="me-4"
|
||
|
|
:variant="!totalTabs ? 'tonal' : undefined"
|
||
|
|
@click="totalTabs--"
|
||
|
|
>
|
||
|
|
Remove Tab
|
||
|
|
</VBtn>
|
||
|
|
|
||
|
|
<VBtn @click="totalTabs++">
|
||
|
|
Add Tab
|
||
|
|
</VBtn>
|
||
|
|
</VCardText>
|
||
|
|
</VCard>
|
||
|
|
</template>
|