Kelas dengan literal rentetan dalam Vue, HTML

Question

Saya harap apabila saya menekan butang untuk log masuk dengan kata laluan yang salah, UI akan menunjukkan berbilang pop timbul makluman dan bukannya satu kerana pengguna tidak tahu sama ada mereka masih memasukkan kata laluan yang salah.

Jadi saya menggunakan counter dan string literal seperti ini

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

Ini tidak berfungsi. Ada idea lain?

Answer 1

Anda boleh mengikat kelas -> :class="'mt-${i}'" tildas ` hendaklah sekitar ${i} sahaja dan menggunakan apostrof di sekeliling nama keseluruhan 'mt-yourcode'

Answer 2

Ini sepatutnya berfungsi:

  Wrong Password

Lihat contoh ini