0👍
You can store your tabs in an array and use it to compute an array for rendering.
Template:
<template>
<div>
<v-tabs color="" slider-color="blue" grow="" style='box-shadow:0 0px 0 1px #ddd;'>
<v-tab v-for="(tab, index) in tabsToShow"
:to="tab.to" ripple="">{{tab.name}}</v-tab>
</v-tabs>
<router-view></router-view>
<a v-if="selectedTabIndex > 0"
:href="tabsToShow[selectedTabIndex - 1].to">
{{tabsToShow[selectedTabIndex - 1].name}}</a>
<a v-if="selectedTabIndex < tabsToShow.length - 1"
:href="tabsToShow[selectedTabIndex + 1].to">
{{tabsToShow[selectedTabIndex + 1].name}}</a>
</div>
</template>
Script:
data() {
return {
tabs: [
{
to: '/customer/info',
name: 'General Information',
visible: true,
},
// other tabs
],
selectedTabIndex: 0,
}
},
computed: {
tabsToShow() {
return this.tabs.filter(tab => tab.visible);
},
},
Then, all you have to do is somehow get an index of currently selected tab in an filtered array. For example, on click.
- [Vuejs]-Vue string matching in handlebars {{myString !== "" ? myString : otherString}}
- [Vuejs]-How to unshift object to first chunk and move oldest to new chunk in javascript?
Source:stackexchange.com