[Vuejs]-How to disable a tab without content on my website in vue.js

0👍

Assuming you are using Buefy for the tab component, you could try this

:disabled="!tab.content"

In the example below, "Pictures" tab is enabled whereas "Music" tab is disabled because it has no content.

<template>
  <b-tabs v-model="activeTab" :multiline="multiline">
        <template v-for="tab in tabs">
            <b-tab-item
                :key="tab.id"
                :value="tab.id"
                :label="tab.label"
                :disabled="!tab.content" >
                {{ tab.content }}
            </b-tab-item>
        </template>
    </b-tabs>
 </template>

<script>
export default {
   computed: {
      tabs() {
            const tabs = [
                {
                    id: 'pictures',
                    label: 'Pictures',
                    content: 'Pictures: Lorem ipsum dolor sit amet.'
                },
                {
                    id: 'music',
                    label: 'Music',
                    content: '',
                }
             ]
            return tabs
        }
   }
} 
</script>

enter image description here

Leave a comment