[Vuejs]-Icons instead of text as tabs in Vue.js

by

0👍

Try this:

       <div 
            v-for="tab in tabs" 
            :key='tab' 
            @click="currentTab = tab" 
            :class="['tab-button', {active: currentTab === tab}]"
        > 
        <font-awesome-icon >
            icon="user-secret"
        </font-awesome-icon >
    </div>

also this @click="currentTab = tab" needs to be refactored

0👍

I’ll assume that this issue has already been solved, but, in any case, here is my contribuition using fontAwesome so you can understand the logic:

Change the definition of your data tabs and currentTab to something like this:

currentTab: {title:'Post section',icon:'bell',page:'Post'},
tabs:{
    title:'Post section',
    icon:'bell',
    page:'Post'
},
{
    title:'List of posts',
    icon:'list',
    page:'List'
}

Convert your font-awesome-icon tag to:

<button v-for="tab in tabs" :key="tab" 
:class="['tab-button', { active: currentTab === tab }]" @click="currentTab = tab" 
title="tab.title">
    <i class="fa" :class="'fa-'+tab.icon"></i>
</button>

Finally change you component tag to:

<component :is="currentTab.page" class="tab"></component>

And them you can ignore the whole compuded: {} section of your export default

Leave a comment