Home » vue » Class with string literals in Vue, HTML

Class with string literals in Vue, HTML

Posted by: admin November 26, 2021 Leave a comment

Questions:

I want when I press button log in with wrong password, the UI show multiple alert popup instead of one because the user will not know whether they still enter wrong pass or not.

So I using 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>

It doesn’t work. Any other ideas?

Answers:

This should work:

<v-alert
  v-for="i in counter"
  :key="i"
  :class="`mt-${i}`" 
>
  Wrong Password
</v-alert>

See this example

###

you can bind the class -> :class="’mt-${i}‘" the tildas ` should be around the ${i} only and an apostrophe around the whole name ‘mt-yourcode’