Classes with string literals in Vue, HTML

Question

I want when I press the button to log in with a wrong password, the UI will show multiple alert popups instead of one because the user doesn't know if they still entered the wrong password.

So I use counter and string literal like this

<!-- 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>

This doesn't work. Any other ideas?

Answer 1

You can bind classes -> :class="'mt-${i}'" tildas ` should only be around ${i} and around the whole name 'mt-yourcode' Use apostrophe

Answer 2

This should work:

  Wrong Password

View this example