[Vuejs]-Vue.js 3 tabs in a 1 tab

by

0đź‘Ť

There’s no active_tab defined in your ArmorTabs.vue component.

One more thing: don’t use arrow functions on Vue’s instance properties.

<script>
    export default {
        data() {
            return {
                active_tab: 5, // ------ add this
                tabs: [
                    { index: 5, name: 'MAIN', content: "123" },
                    { index: 6, name: 'ARMORS', content: "456"  },
                    { index: 7, name: 'WEAPONS', content: "789"  }
                ]
            }
        }
    }
</script>

0đź‘Ť

it helps

<v-tab-item v-for="(tab, name) in tabs" :key="name">
    <div v-if='tab.name == "ARMORS"'>
        <ArmorTabs/>
    </div>
    <div v-else>
        {{ tab.content }}
    </div>
</v-tab-item>

Leave a comment