CODEWITHSUNDEEP
htmlcssvue.jsvuetify.js
Tan Nguyen
Tan Nguyen

Reputation: 323

Class with string literals in Vue, HTML

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?

Upvotes: 0

Views: 2033

Answers (2)

tauzN
tauzN

Reputation: 6931

This should work:

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

See this example

Upvotes: 5

Jamie Garcia
Jamie Garcia

Reputation: 292

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'

Upvotes: 0

Related Questions