I want to use Vuetify (v1.0.18) to render some static navigation using v-tabs. The routing is done on the server side, so I need a way to set the active tab by properties. It's a very basic task, but I don't get it to work. Example:
<v-tabs>
<v-tab href="/path1">Tab 1</v-tab>
<v-tab href="/path2">Tab 2</v-tab>
</v-tabs>
This preselects the first tab - fine.
Now the question ist: How to preselect the second tab? The following does not work:
<v-tabs value="tab2">
<v-tab id="tab1" href="/path1">Tab 1</v-tab>
<v-tab id="tab2" href="/path2">Tab 2</v-tab>
</v-tabs>
As a workaround I made a wrapper component:
<template>
<v-tabs v-model="selectedTab">
<slot></slot>
</v-tabs>
</template>
<script>
export default {
name: 'StaticTabs',
props: [ 'selected' ],
mounted() {
this.selectedTab = this.selected
},
data: () => ({
selectedTab: null
}),
}
</script>
Use it with this:
<static-tabs selected="/path2">
<v-tab id="tab1" href="/path1">Tab 1</v-tab>
<v-tab id="tab2" href="/path2">Tab 2</v-tab>
</static-tabs>
Lots of code for a very basic task, but it works.