Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

441
Views
How to disable a tab without content on my website in vue.js

I have two tab-items that I can toggle but when one is without any content how do I show it disabled.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!