<template>
<div>
Current active tab: {{ activeTab }}
<div>
buttons:
</div>
<button :class="{ 'active': activeTab === 0 }">Button 0</button>
<button :class="{ 'active': activeTab === 1 }">Button 1</button>
<button :class="{ 'active': activeTab === 2 }">Button 2</button>
<button :class="{ 'active': activeTab === 3 }">Button 3</button>
<button :class="{ 'active': activeTab === 4 }">Button 4</button>
</div>
</template>
<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>
<style scoped>
.active {
background-color: cyan;
}
</style>
<template>
<div>
Current active tab: {{ activeTab }}
<div>
buttons:
</div>
<button :class="{ 'active': activeTab === 0 }">Button 0</button>
<button :class="{ 'active': activeTab === 1 }">Button 1</button>
<button :class="{ 'active': activeTab === 2 }">Button 2</button>
<button :class="{ 'active': activeTab === 3 }">Button 3</button>
<button :class="{ 'active': activeTab === 4 }">Button 4</button>
</div>
</template>
<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>
<style scoped>
.active {
background-color: cyan;
}
</style>
