Tengo dos elementos de pestaña que puedo alternar, pero cuando uno no tiene contenido, ¿cómo lo muestro deshabilitado?
Suponiendo que está utilizando Buefy para el componente de pestañas, puede probar esto
:disabled="!tab.contenido"
En el siguiente ejemplo, la pestaña "Imágenes" está habilitada mientras que la pestaña "Música" está deshabilitada porque no tiene contenido.
<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>