vue.js: failure to set multiple classes with a variable part

December 14, 2023

I need to add few different classes on a div: one is static, another one with a variable, the last one is depending on a inner prop. The next option fails: nothing’s in the output

<div v-for="card in cards" :key="card.id" class="card" :class="{`card${card.rank}`,'cardFade':isFadeProp}"> 
     <span class="card__number">{{ card.rank }} </span>       
</div>

Looks like a problem is in the second class with a variable inside a collection of classes.
Any elegant solutions?

>Solution :

I think the correction lies in the way you’re concatenating the class names and using the object syntax for conditional classes. Maybe try the code below:

<div v-for="card in cards" :key="card.id" class="card" :class="[
  'card' + card.rank,
  { 'cardFade': isFadeProp }
]">
  <span class="card__number">{{ card.rank }}</span>       
</div>

‘card’ + card.rank correctly concatenates the string ‘card’ with the card.rank. I am not an expert on vue.js but you can as well try it.