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

When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...

javascripthtmlcsscss-animations

The comparison between local variables and data can result in a significant drop in performance

My current project involves VueJS and Cesium, but I'm facing a performance issue with a significant drop in frame rate. While I have identified the problem area, I am unsure of why this is happening and how to resolve it. export default { name: ...

javascriptvue.jsthiscesiumjsscoping

Learn how to showcase the value of the selected radio button in AngularJS

To show the chosen radio button in the response div, make sure to hide the div if no option is selected. Check out the code below: <body ng-app="QuestionDisplayModule"> <form> <div ng-controller="QuestionDisplayController" ...

javascripthtmlangularjs

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

javascriptcsstypescriptreact-nativereact-native-modal

stop initial focus on input field in Ionic

One issue I'm facing is that my login screen for the application automatically focuses on the 'username' input field and triggers the keyboard to pop up. This causes the contents of the login screen to push up, resulting in incorrect dimensi ...

csshtmlangularjsionic-framework

JQuery may be successfully loaded, but it is not functioning as intended

Just started dabbling in JQuery (I'm a newbie) but I'm having trouble getting it to work! Initially, it worked a couple of times but then suddenly stopped working (pretty strange). I made some changes and now it doesn't work at all. JQuery a ...

javascriptjqueryhtmlcss

Ensuring the CSS animation reaches its ultimate state by the end

I am currently implementing an animation on specific elements that have their opacity set to 0 in the CSS. The animation is triggered onClick, and via keyframes, it transitions the opacity from 0 to 1, among other things. However, once the animation compl ...

csscss-animations

What is causing the gradient to not fully extend across the entire element?

In my CSS, I have the following styling for a button: <a class="button"> <span>Y</span> </a> .button { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; ...

cssgoogle-chromewebkitgradient

The React JSX error message "Maximum update depth exceeded" occurs when there

It appears that I am facing an issue of creating an infinite loop while passing props from one class to another. Despite ensuring that the buttons are correctly bound and trigger only once, the problem persists without any solution in sight after thorough ...

javascripthtmlreactjsloopsjsx

The right padding on an HTML table is not functioning properly when the table width is larger than

I am facing an issue with a table that has multiple columns. I want each column to have the same width, resulting in the total table width being wider than the page width. This is fine as it prompts the browser to display a horizontal scrollbar. However, d ...

htmlcsshtml-table

"Revamp your site with Vue and API for dynamic background

I'm faced with an issue where I am attempting to modify the background of a joke fetched from an API, but for some reason, the background is not changing and I can't seem to identify why. The main problem lies in my inability to change the proper ...

javascripthtmlvue.js

Displaying country-specific API details (such as capital and currency) in a card container when selecting a country from a dropdown menu

My objective is to display the card information for South Africa as the default value, even before entering any country's name into the search bar input field or selecting a specific country from the provided list. I am utilizing the restcountries API ...

javascriptjqueryvue.jssearchbarcountries

Adjust and modify class when resizing the window

I've encountered a challenge with my Bootstrap Modal when trying to set the width to 750px on large desktops. When resizing the window to a smaller size, the modal loses its responsiveness. To tackle this, I added a class to the modal to give it a fix ...

jquerycssbootstrap-modal

Accessing the form element in the HTML outside of the form tag in Angular 2

I am attempting to achieve the following: <span *ngIf="heroForm?.dirty"> FOO </span> <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm"> <div class="form-group"> <label for="name">Name</label& ...

htmlangulartypescript

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

javascriptjqueryhtml

Obtain model value that has been stylized using Vue.js

In my Vue.js application, there is a table that lists both a URL and an Id. The URL is user-defined, so I implemented an input component with a text input field to display the URL value and pass the Id as a parameter. The v-model of this component is an ar ...

vue.jsvue-component

Issue with React Toastify display not showing

I'm having trouble getting a pop-up alert to appear when a user interacts with a radio button. I've included the relevant code snippet below. Even though I see the console message when I select a radio button, the pop-up doesn't show up. Can ...

htmlreact-toastify

HTML5 audio recording

I have been exploring different methods to record audio using HTML5, but so far I have not found a solution. I attempted to utilize this particular example without success. It seems that the statement about lack of support from any browser may be true. ...

htmlaudio-recording

Are Bootstrap Input groups inconsistent?

Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...

javascripthtmlcsstwitter-bootstrap

Leveraging AJAX to assist in PHP for data parsing

I am currently exploring the world of AJAX and grappling with a unique situation. I am in the process of developing an HTML app that will be integrated into a mobile application using PhoneGap. The main objective of my project is for the HTML page to con ...

javascriptjqueryajaxhtmlcordova