CODEWITHSUNDEEP
cssvue.jsnuxt.js
yoyojs
yoyojs

Reputation: 1773

Insert string in a class in a vue js component

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.

Upvotes: 0

Views: 429

Answers (1)

samayo
samayo

Reputation: 16495

You can bind the class dynamically using something like this: 

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

Upvotes: 2

Related Questions