Class with string literals in Vue, HTML

Question

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?

I really do not understand your use case but in any case the string literals are JavaScript feature. To tell Vue that what is passed into a prop/class/style should be interpreted as JavaScript, use v-bind - v-bind:class="`mt-${i}`" — Michal Levý
– Michal Levý, Commented Oct 19, 2021 at 14:21

tauzN · Accepted Answer · 2021-10-20 15:09:23Z

5

This should work:

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

See this example

edited Oct 20, 2021 at 15:09

answered Oct 19, 2021 at 15:10

tauzN

7,4872 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tan Nguyen Over a year ago

Almost close, need v-bind

tauzN Over a year ago

Yes, ofc ;) thanks! It was in the example.

Jamie Garcia · Accepted Answer · 2021-10-19 14:35:31Z

0

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'

answered Oct 19, 2021 at 14:35

Jamie Garcia

2845 silver badges19 bronze badges

5 Comments

Daniel Beck Over a year ago

The :class part is correct, but your explanation of how to use string literals is not (it should be :class=`mt-${i}`)

Jamie Garcia Over a year ago

still seems like " " should be wrapped around the class though

Daniel Beck Over a year ago

Nope. That would just make it a normal string containing literal backticks, and without the variable substitution.

Daniel Beck Over a year ago

Aaaaand it turns out I'm wrong; vue templates do require surrounding quotes around a string literal. Weird but true. Apologies for the misinformation!

Jamie Garcia Over a year ago

thanks! i knew i wasnt crazy! haha

Collectives™ on Stack Overflow

Class with string literals in Vue, HTML

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related