Hide a tab
Closed this issue · 1 comments
ingpedroaraujo commented
Is there a way to hide a tab depends on a props value?
thanks in advanced
karambafe commented
Hi, you cannot hide the tab through props.
But you can add any property to the tabs array and filter by it.
<template>
<Tabs
:tabs="visibleTabs"
: currentTab="currentTab"
@onClick="handleClick"
/>
</template>
<script>
export default {
components: {
Tabs,
},
data: () => ({
tabs: [
{ title: 'Tab 1', value: 'tab1', visible: true },
{ title: 'Tab 2', value: 'tab2', visible: true },
{ title: 'Tab 3', value: 'tab3', visible: false },
],
currentTab: 'tab1',
}),
computed: {
visibleTabs() {
return this.tabs.filter(tab => tab.visible);
},
},
methods: {
handleClick(newTab) {
this.currentTab = newTab;
},
},
}
</script>