Using string literals in Vue and HTML classes

When a user attempts to log in with the wrong password, I want multiple alert popups to appear on the UI instead of just one. This will help the user understand if they are still entering the incorrect password.

To achieve this, I decided to use a counter and string literal in the following way:

<!-- mt = margin-top, so each alert won't overlap -->
<v-alert
  v-for="i in counter"
  :key="i"
  class=`mt-${i}`  
>
  Wrong Password
</v-alert>

However, the current approach is not working as intended. Do you have any other suggestions?

htmlcssvue.jsvuetify.js

Answer №1

Here is a solution:

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

Check out this example

Answer №2

One way to apply the class attribute dynamically is by using :class="'mt-${i}'". Make sure to enclose the ${i} variable with tildas ` and include an apostrophe around the entire class name 'mt-yourcode'.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for retrieving a module from a store using its name represented as a string?

Just starting out with Vuejs and encountering a slight hiccup. I want to utilize a store, however, all I have is the name stored as a string. From what I understand, I can access the method (all()) of the store by using: storeName.all My issue lies in ha ...

vue.jsvuex

"Utilizing Box elements, implementing linear gradients, styling with CSS, and

Currently, I am working on a project that involves using react JS and I am trying to find a solution for implementing linear gradient in multiple boxes. Specifically, I want to achieve the effect of having three identical boxes lined up next to each other. ...

javascriptcssreactjsmaterial-uibox

Error in HTML5 video: Unable to access property '0' as it is undefined

I am trying to create a simple block displaying an HTML5 video tag. I want the ability to play different videos along with their titles from a JSON file by using previous and next buttons. Clicking the next button should play the next video, and the same g ...

javascriptjquerycsshtml

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

Align the center element vertically on a website with a Bootstrap 4 navigation bar

I am trying to vertically center an element on the page. It works fine until I add a Navbar, which causes the element to be centered with an offset from the height of the Navbar. How can I center the content container vertically while accounting for the Na ...

htmlcsstwitter-bootstrap

What is the best way to display a list of items in Vue JS while maintaining the

Looking to display my Vue.js list in reverse order using v-for without altering the original object. The default HTML list displays from top to bottom, but I want to append items from bottom to top on the DOM. Telegram web messages list achieves this wit ...

javascriptangularjsdomvue.js

The error message "Reference Error: document is not defined in nativescript-vue" indicates that

let activeElements = document.getElementsByClassName('active'); while(activeElements.length > 0){ activeElements[0].classList.remove('active'); } $event.target.classList.add('active'); An error stating "document is not ...

vue.jsvuejs2vue-componentnativescript

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascripthtmlcss

Internet Explorer having trouble with onload function

Here is a snippet of code that I am working with: <html> <head> <style> #visibilitycontent{ visibility:hidden; } </style> </head> <body onload="visibilitychange()"> <div id="header"> This is the h ...

jqueryhtml

CSS background: seeking a fresh background for the rest of my pages

When I use CSS background: url(stuffhere.jpeg) for the background, it remains unchanged when clicking on other videos categorized as "projects," not pages. I have attempted using <body id="home"> and <body id="projects">, creating two backgrou ...

cssbackground

Is it possible to embed a Microsoft Teams meeting within an Iframe?

Is it possible for MS Teams to provide a URL of a video meeting that can be embedded in external locations, such as an iframe on my website? I attempted to add it like this: <iframe src="https://teams.microsoft.com/l/meetup-join/19%3ameeting_N2E3M ...

javascripthtmliframemicrosoft-teamsx-frame-options

Update the default base URL configuration for Axios

My axios configuration looks like this: const configAxios = { baseURL: 'http://127.0.0.1:8000/api', timeout: 30000, }; Vue.prototype.$axios = axios.create(configAxios) When making a call inside my component, I use the following syntax: this ...

javascriptvue.jsvuejs2axios

Is it possible to generate various resolutions of an image simultaneously?

While trying to download wallpapers from a link on this website, I encountered an issue. Upon clicking the download button, a new page opened with the URL "https://images.wallpapersden.com/image/download/street-fighter-fortnite_bGtoaW6UmZqaraWkpJRmbmdlrW ...

javascripthtmljquerycssweb

Transitioning Between Div Elements Using Jquery

I am stuck with the following HTML code: <section> <div id="first"> ---content </div> <div id="second"> ---content </div> </section> When the page loads, the second div and its contents are not visible (I'm uns ...

jqueryhtmlcss

Using VueJS Single File Components can cause issues with the example code for "Custom Popups" in the Google Maps API

Trying to implement a unique Google Maps popup following the provided documentation. After copying and pasting the official Google example code into a VueJS jsFiddle, the custom marker functions correctly as intended. It remains in the designated area eve ...

javascriptgoogle-mapsgoogle-maps-api-3vue.jsvuejs2

Determining the precise location of the div element

I am seeking to determine the precise positions of a div based on its class name. In the screenshot provided, my script for finding the div's position is highlighted in yellow, while the div I am targeting is highlighted in red at the bottom. Currentl ...

javascriptjqueryhtmlcsscss-position

pick out particular values from an array

I have a question that may seem basic to some, but I'm curious about how to select specific elements from an array. In this case, I have an array with 100 elements: var cubes = [element1, element2, element3 ...] and I want to select elements 25-35. ...

javascripthtmlarrays

Ways to verify whether a vue instance is empty within a .vue file by utilizing the v-if directive

I am facing an issue with a for-loop in Vue that iterates through a media object using v-for to check if it contains any images. Everything is working correctly, but I want to display a div below the loop saying "There is no media" when the object is empty ...

javascriptvue.js

What is the best way to reduce the distance between labels and input fields?

Currently, I am utilizing Blazorise along with Bootstrap 5, however, I have noticed that the spacing between the input field and the label is too wide. Here is an illustration of the space between the input and the label: Is there a way for me to reduce ...

htmlcssblazorbootstrap-5blazorise

What is the best way to include the existing query string value in the hyperlinks on my page?

My main coding objective is to simultaneously search multiple websites. To accomplish this, I want to create a query string containing the search terms (primarily for analytics purposes) using a form. By utilizing JavaScript, I am aiming to include the s ...

javascriptjqueryhtmlarraysquery-string