Classes avec des chaînes littérales dans Vue, HTML

Question

Je souhaite que lorsque j'appuie sur le bouton pour me connecter avec un mauvais mot de passe, l'interface utilisateur affiche plusieurs fenêtres contextuelles d'alerte au lieu d'une, car l'utilisateur ne sait pas s'il a toujours entré le mauvais mot de passe.

J'utilise donc des compteurs et des chaînes littérales comme ceci

<!-- mt = margin-top, so each alert won't lie on each other -->
<v-alert
  v-for="i in counter"
  :key="i"
  class=`mt-${i}` 
>
  Wrong Password
</v-alert>

Cela ne fonctionne pas. D'autres idées ?

Answer 1

Vous pouvez lier des classes -> :class="'mt-${i}'" les tildas ` devraient être autour de ${i} seulement et utiliser des apostrophes autour du nom complet 'mt-yourcode'

Answer 2

Cela devrait fonctionner :

  Wrong Password

Voir cet exemple