如何在Vue.js中添加不同的字体真棒图标

Question

I am modeling an app section to display three different tabs with three different Font Awesome icons. So far, the tabs are set in the following way and the application shows only one icon in tab:

   <div class="tab">

    <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i class="fa fa-bullhorn" style="width:auto" aria-hidden="true"></i> {{tab}}
         </a></li>
      </ul>

 </div>

Here follows the Vue application snippet to model the tabs.

   <script>
   data() {
    return {
      curentTab:0,
      tabs:['Tab1','Tab2 ','Tab3']
    }
  }
  </script>

How can I show different icons for different tabs?

Thanks in advance!

Answer 1

To render each tab with its specific icon you could modify your data model by introducing a different icon for each tab. For example, like this:

tabs:[
  {label: 'Tab1', icon:'smile'},
  {label: 'Tab2', icon:'bullhorn'},
  {label: 'Tab3', icon:'heart'}
]

Also, you have to modify your template by binding the i CSS class accordingly. To do so, you can:

1. introduce a Vue method returning the proper CSS class corresponding to the FontAwesome one, eg:

    methods: {
         faClass(icon) {
            return `fa fa-${icon}`;
          }
        }

2. invoke this new method in your template , like this:

<i :class="[faClass(tab.icon)]" style="width:auto" aria-hidden="true">

Here you can see how class is now bound through Vue itself.

---

So, going back to your example, you will have:

HTML template

<div id='app'>
  <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i :class="[faClass(tab.icon)]" 
           style="width:auto" 
           aria-hidden="true"></i> {{tab.label}}
         </a></li>
      </ul>
</div>

Vue instance

    ...
    data: function() {
       return {
        curentTab:0,
        tabs:[
         {label: 'Tab1', icon:'smile'},
         {label: 'Tab2', icon:'bullhorn'},
         {label: 'Tab3', icon:'heart'}
       ]
      }
     },
      methods: {
        faClass(icon) {
          return 'fa fa-'+icon;
        }
      }
    ...

Check this CodePen to see it in action.