karambafe/vue-tabs-with-active-line

Hide a tab

Closed this issue · 1 comments

Is there a way to hide a tab depends on a props value?
thanks in advanced

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>