How to bind CSS class into an HTML code tag?

Question

I have data like so:

new Vue({
el: '#app',
data: {
    icons: [ 
        { "name": "Car", "css": "car" }, { "name": "Airplane", "css": "airplane" } 
    ]
  }
});

And I want to bind the css value to my view inside an HTML <code> element and formatted and rendered as so:

<i class="fa fa-car></i>

Here's my attempt using Vuejs2.0:

<code>%lt;i class="fa" :class="'fa-' + icon.css">&lt;/i&gt;</code>

Unfortunately, the DOM is rendered like so:

<i class="fa" :class="'fa-' + icon.css"></i>

How do I make this work? Thanks!

Answer 1

If you want to iterate inside your icons array, you can use a template with the v-for directive :

<template v-for="icon in icons">
    <i class="fa fa-{{ icon.css }}></i>
</template>