hgh_admin/resources/js/views/demos/components/tabs/DemoTabsDynamic.vue
2024-05-29 22:34:28 +05:00

39 lines
593 B
Vue

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