Home > OS >  Class with string literals in Vue, HTML
Class with string literals in Vue, HTML

Time:10-20

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

It doesn't work. Any other ideas?

CodePudding user response:

This should work:

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

See this example

CodePudding user response:

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

  • Related