Vue.js 中的图标而不是文本作为选项卡

Question

I wanted to make the lower menu similar to VK, where you click on the icons and the content changes. I implemented different content, but I can't make each tab have its own icon.

I provide a screenshot and code. Do not pay attention to the style, I first need to understand the logic Using Vue CLI.

<template>
    <div id="app">
        <font-awesome-icon 
            icon="user-secret" 
            v-for="tab in tabs" 
            :key='tab' 
            @click="currentTab = tab" 
            :class="['tab-button', {active: currentTab === tab}]"
        > 
            {{ tab }}
        </font-awesome-icon>
    
        <component v-bind:is="currentTabComponent"></component>
    </div>
</template>
    
<script>
import Posts from './Posts.vue'
import List from './List.vue'
    
export default {
    data () {
        return {
            currentTab: 'Posts',
            tabs: ['Posts', 'List'],
            icon: 'bell'
        }
    },
    components: {
        tabPosts: Posts,
        tabList: List
    },
    computed: {
        currentTabComponent() {
            return 'tab-' + this.currentTab.toLowerCase()
        }
    }
}
</script>
    
<style scoped>
body {
    overflow: auto;
    padding: 0;
    margin: 0;
}
    
#app {
    position: relative;
    width: 320px;
    height: 400px;
    border:  solid 1px black;
}
.tab-button.active {
    position: relative;
    color: red;
    height: 50px;
    width: 50px; 
}
    
.tab-button {
    position: relative;
    float:  right;
    bottom: 10px;
    height: 50px;
    width: 50px; 
}
</style>

Answer 1

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

Answer 2

I'l 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