Vue – adding a Class-Name to a Component using a prop

I would like to make a custom component in Vue with the following props:

• text = text to be displayed in the link.
• icon = identifier of the icon to be displayed next to the link.

< sidebar-link text=”Home” icon=”fa-home”>

I have the following .Vue template for my component.

<template>
    <div id="sidebarItem">  
        <a href="/index.php">
            <div id="sidebarIcon"><i :class="{fa : true}" aria-hidden="true"></i></div>
            <div id="sidebarText">{{ text }}</div>
        </a> 
    </div>
</template>

<script>
export default {
    props: ['text', 'icon'],
    data () {return {}}
}
</script>

Essentially I have the default Font-Awesome code in my template:

<i class="fa fa-home" aria-hidden="true"></i>

and I want add a class to my component by using it’s prop.

<sidebar-link text="Home" icon="fa-home"></sidebar-link>

thanks.

Answer

So when your property icon is holding the value home you can use some class binding like the following (Thank god js expression are allowed within attributes in Vue.js):

v-bind:class="[{'fa': true}, icon ? 'fa-' + icon : '']"

or even shorter

:class="[{'fa': true}, icon ? 'fa-' + icon : '']"

This will result in

class="fa fa-home"