Insert string in a class in a vue js component

Question

Hello i have a vue component where i loop in a list of countries like that :

<div v-for="i in pays" :key="i.id">
  {{i.name}}
  <span class="flag-icon-gr"></span>

And i would like to change the end of the flag-icon with the according label i receive from my loop. For example i would like to have flag-icon-fr if the country is france. Is there a proper way to do that ?

ps: im using nuxt but i guess it is the same for a normal vue js component.

samayo · Accepted Answer · 2018-07-02 15:44:59Z

2

You can bind the class dynamically using something like this:

<span :class=:icon="'fa-flag' + i.name"></span>

answered Jul 2, 2018 at 15:44

samayo

16.5k13 gold badges95 silver badges114 bronze badges

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

1 Comment

yoyojs Over a year ago

exactly what i needed !

Collectives™ on Stack Overflow

Insert string in a class in a vue js component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related