Tengo un componente de pestaña Vue que la consola cierra la sesión del índice correcto de la pestaña seleccionada, pero no sé cómo configurar la pestaña activa para que se abra. Cualquier ayuda o dirección sería apreciada.
Componente:
<Tabs :tabs="tabs" :active-tab-index="activeTab" @tab-changed="changeTab" />Margen
<div v-show="activeTab === 0"> Show tab one content </div> <div v-show="activeTab === 1"> Show tab two content </div>Datos:
data() { return { tabs: [ { id: 0, name: 'Tab One' }, { id: 1, name: 'Tab Two' }, ], activeTab: 0, } },Método:
changeTab(index) { console.log('Change activeTab', index) },no me queda completamente claro dónde están el método y los datos, pero asumo que está en el padre, por lo que en ese caso simplemente necesitaría cambiar la función a algo como esto:
changeTab(index) { this.activeTab = index }, su componente podría ser aún más limpio si brindara la opción de usar v-model en él como: v-model:activeTabIndex="activeTab" . Para que esto suceda, solo necesita emitir los datos dentro del componente con update:activeTabIndex en lugar de tab-changed .