How to bind multiple css classes in a table row element?

Question

I'm new to Vuejs2.0 and trying to bind multiple css classes to a table row element.

Here's my view (and my attempt):

<tr v-for="icon in icons">
    <td><i class="fa fa-" v-bind:class="icon.css"></i></td>
    <td>{{icon.name}}</td>
</tr>

The td element with the css classes should be successfully rendered as so:

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

Here's my model/data (snipped for brevity):

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

How would I get this successfully rendered ? Thank you.

Jonatas Walker · Accepted Answer · 2017-02-20 14:14:27Z

2

<tr v-for="icon in icons">
    <td><i class="fa" :class="'fa-' + icon.css"></i></td>
    <td>{{icon.name}}</td>
</tr>

Or

<tr v-for="icon in icons">
    <td><i :class="'fa fa-' + icon.css"></i></td>
    <td>{{icon.name}}</td>
</tr>

answered Feb 20, 2017 at 14:14

Jonatas Walker

14.3k6 gold badges57 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonatas Walker Over a year ago

@redshift You're welcome. Then please mark the answer as correct and finish this one.

redshift Over a year ago

I just did. Also, here's a similar question now: stackoverflow.com/q/42348292/2420614

Collectives™ on Stack Overflow

How to bind multiple css classes in a table row element?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related