Injecting Vue.JS data into an HTML attribute

I'm currently exploring Vue.JS and working on a status bar. I am curious about how to incorporate data from Vue into an HTML attribute.

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">${this.score}% Complete</span>
    </div>
</div>

I have attempted the following:

<div class="progress">
    <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">${this.score}% Complete</span>
    </div>
</div>

However, the v-bind: directive does not seem to be working as expected.

javascripttwitter-bootstrapvue.js

Answer №1

That solution works perfectly for me.

new Vue({
  el: '#app',
  data: {
    score: 20
  }
});
[aria-valuenow="20"] {
  color: red;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<div id="app" class="progress">
  <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    <span class="sr-only">${{this.score}}% Complete</span>
  </div>
</div>

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

Creating sitemaps for multi domain websites using NextJS

We are implementing a next-sitemap package to generate sitemaps for our Next.js pages located in the /pages directory. For pages that come from the CMS, we use server-sitemap.xml with SSR. Despite having 6 different domains, we manage them within a single ...

javascripthtmlreactjsnext.jsseo

Do we really need to use the eval function in this situation?

Just wondering, is it reasonable to exclude the eval() function from this code? Specifically how <script> ... ... function addGeoJson (geoJsonPath, iconPath = "leaflet-2/images/marker-icon.png", iconSize = [30,50], popUpContent, ...

javascriptjqueryjsonleafleteval

The hamburger menu for mobile devices is not functioning properly on the website's mobile version, however it operates correctly when the screen is resized

Currently, I am facing an issue with the hamburger menu not responding on my mobile device. Oddly enough, it does work when I resize my browser window to mimic a mobile size. There seems to be a glitch happening, but I'm struggling to pinpoint the exa ...

javascripthtmlcss

Event emitting from a parent Vue.js component

I can't figure out why my code is not functioning properly. I have an event called 'leave' that should be triggered on blur. The components show up correctly, but the event doesn't fire when leaving the inputs. Vue.component('te ...

javascripthtmleventsvue.jscomponents

I have successfully integrated my custom external JavaScript code with React Router, and everything is working

Assistance Needed! I am working on a project that consists of 4 pages, one of which is the About page. I am using react-router to manage the paths and contents between these pages through their respective links. import React from 'react'; impo ...

javascriptreactjsreact-router

Navigating through PWAs and implementing deep linking in both single page applications (SPAs) and multi-page applications

QUESTION: How can navigation, history, and deep-linking be managed in a PWA without relying on a heavy JS Framework? Tasked with transitioning an existing shopping website from Angular 1 SPA to a Multi Page App (MPA) PWA, I find myself grappling with desi ...

javascriptangularpolymeraureliaprogressive-web-apps

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

Can a specific v-bind class be activated without affecting others in VueJS and Laravel?

In my project, I have several input fields with a specific class that is triggered if the value is less than 0. Each input field functions similarly to the example below. However, I am facing an issue where when one input triggers the class, all input fi ...

laravel-5vue.jsvuejs2

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

javascripthtml

does not output any console log statements

I am attempting to showcase the values of checkboxes on the console, however, it is not working. <input type="checkbox" id="id_price" value="1" onclick="display_img()">Under £200<br> <input type="checkbox" id="id_pr ...

javascriptphphtmlajax

Retrieving External JSON Data from a Server with Firefox

I've been developing a static local HTML5 charting application that retrieves data from a remote server for output. The code works perfectly in Google Chrome, as shown below, but I'm encountering difficulties getting it to function in Firefox. & ...

javascriptjsonfirefox

What is the best way to send a parameter to an express.js Router?

Here's a unique spin on an example taken from Express.js's routing guide: var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.send('Welcome to the home of Birds&ap ...

javascriptnode.jsexpress

Retrieve the name of the path for the specified * stack within Express.js

When working with Express.js, I am utilizing '*' to catch the error 404. Is there a way for me to find out the path name of the error URL? app.get('*', (req, res) => { console.log("route: " + JSON.stringify(req.route) ...

javascriptnode.jsexpressroutes

Tips for utilizing the @run-at document-start meta-rule

Currently, I am utilizing the following code snippet: Jquery(window).load(function(){ // here is my code for making an AJAX request to retrieve data from the database }); Unfortunately, I have encountered an issue specifically with its function ...

javascriptjqueryajaxliferayliferay-aui

Javascript function that sets the opacity to 0

Hello everyone, I'm new to SO and seeking some guidance on improving my post! I have a function that sets the opacity of an element to 0 in order to clear it. While this works fine, it becomes burdensome when dealing with multiple elements that requi ...

javascripthtmlfunction

The order in which JavaScript files are loaded is critical, especially when dealing with external

After experiencing issues with my script not working because it was loaded before jQuery by the client (a necessity), I am seeking a solution. My challenge lies in ensuring that my code waits for jQuery to load before execution, especially when dealing wi ...

javascriptjqueryonloadjquery-on

What is the best way to show inline icons within menu items?

Issue Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question"). Fig. 1. Display of menu after selection with the icon and t ...

javascriptcssreactjsmaterial-ui

What is the best way to concatenate two different values in React JSX using the "+" operator?

I have a situation where I need to take a value from an input, add 10% to it, and display the result. For example, if a person inputs 1000, the 10% of 1000 is 100, so the total result should be 1100. Currently, when I use the "+" operator, it concatenates ...

javascriptreactjsreact-hooks

Dropbox menu within an extended webpage

I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...

javascriptjquerycssreactjsecmascript-6

What steps can I take to ensure a JavaScript loading image is displayed until the entire page has finished loading?

Looking to implement a JavaScript loading image that displays until the page has fully loaded? I'm currently developing an online antivirus scanner and in need of help. I am trying to set up JavaScript to show a loading image while a file is being up ...

javascriptphphtmlcss