Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue.

I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fill whose width is dependent on a number defined in Vue:

https://i.sstatic.net/TeZLs.png

In essence, how can I dynamically change the style of .skill-bar-fill by simply adjusting the number in Vue? Is it possible to adjust the width of each .skill-bar-fill independently for different items?

HTML

<div class="w-100 skill-bar">
    <div class=" skill-bar-fill"> {{ programming.item1}} %</div>
</div>

CSS

.skill-bar{
    text-align: center;
    color: $black;
    font-size: 0.75rem;
    height: 1rem;
    background: $bg-light;
    border-radius: 1rem;
}

.skill-bar-fill{
    height: 1rem;
    background: $green;
    border-radius: 1rem;
}

Vue

export default {
        name: 'Items',
        data() {
            return{
                programming: {item1: 95, item2: 90, },

            }

        }
    }

These are the challenges I am currently tackling.

javascriptcssvue.jsvuejs2vue-component

Answer №1

To maintain the integrity of the skill-bar-fill class, utilize style binding in the following manner:

<div class="w-100 skill-bar">
    <div class=" skill-bar-fill" :style="{width:programming.item1+'%'}"> {{ programming.item1}} %</div>
</div>

It is crucial to preserve the uniqueness of each item within this class by refraining from modifying its properties.

Answer №2

Based on the original question, your requirement has been simplified, making your solution adequate and the following may not be necessary:

To begin with, you may opt for using a CSS variable for the width attribute and dynamically change the variable. However, for subsequent instances, this approach may not suffice as they share the same CSS, requiring an object style syntax.

Instruct the first child element to recognize itself as the initial one and consequently set the variable accordingly

When setting a CSS variable in Vue: Add var into css class

For additional children, utilize object syntax: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

The rationale behind referencing the width of divs to the first uncle is unclear - what happens if the second sibling surpasses the first? Nonetheless, the aforementioned suggestions could address the issue at hand.

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

The computed properties in Vue are not receiving any values when an array is passed using v-bind

Embarking on my Vue journey with a simple example, I am attempting to calculate the sum of items based on the provided data. If you wish to explore the complete example, it can be accessed in this jsffile. Here is the component structure: Vue.component(&a ...

javascriptvue.jsvuejs2vue-component

Encountering an error while attempting to run bcrypt on Meteor and Nodejs - "Undefined property '_handle'."

Having trouble integrating the bcryptjs package into my Meteor app. Successfully installed bcrypt using meteor npm install --save bcrypt. Trying to implement bcrypt functions with import bcrypt from 'bcrypt';. Encountering an error in the cons ...

javascriptnode.jsmeteor

Breadcrumb navigation that is determined by data hierarchies and relationships between parent and child items

I am looking to implement a dynamic breadcrumb system on my website using data-driven methodology. The necessary data is stored in a MariaDB database and has the following structure: parent_id | parent_name | child_id | child_name ——————— ...

javascriptphpmysqld3.jsmariadb

Strategies for resolving type issues in NextJs with Typescript

In my project using Next.js with TypeScript, I encountered an issue while trying to utilize the skipLibCheck = false property for enhanced checking. This additional check caused the build process to break, resulting in the following error: Error info - U ...

javascriptreactjstypescriptnext.js

Ways to verify whether a callback function supplied as a parameter in Javascript has any arguments

My task involves implementing the following: doSomething .then(success) .catch(failure); The success and failure functions are callbacks that will receive their value at runtime (I am developing a module). Therefore, I need to ensure that the fa ...

javascriptnode.jscallbackjavascript-objects

Guide to handling URL errors in a form using AngularJS

I'm currently working on implementing URL validation for my form. The validation itself is working properly, but I've encountered an issue. Previously, I had validation set up so that an error message would display when submitting the form with e ...

javascriptangularjsformsform-submit

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

cssvisual-studio-codeprettier

Is there a way to rearrange the selectpicker selection based on the user's choice?

I'm in the process of setting up a selectpicker that allows users to choose multiple options from a dropdown list. The challenge is that the values extracted by my backend need to be in the order of user selection, rather than the original order of th ...

javascriptjquerydataframeflaskbootstrap-selectpicker

Is it possible to run concurrent PostgreSQL queries in NodeJS?

I'm unsure why, but the task is supposed to be run in parallel and should only take 2 seconds: const test = async () => { client.query("SELECT pg_sleep(2) FROM test", (err, result) => { console.log("DONE!"); }) client.query("SELECT pg ...

javascriptnode.jspostgresql

Encountering an error while using $state.go function in Angular JS testing

Below is the code snippet for a Controller in Angular JS: describe('Controller: homeCtrl', function () { beforeEach(module('incident')); var homeCtrl, $state; beforeEach(inject(function ($controller, _$state_) { $state = _ ...

javascriptangularjskarma-jasmine

Adding values to an array with the click of a submit button in React JS

I have a unique challenge with creating a form that includes custom inputs. const Input = (props) => { return ( <div> <label className={classes.label}>{props.label} <input className={classes.input} {... ...

javascriptreactjsforms

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

htmlcssnode.jshandlebars.js

Creating Immersive Web Pages

I am currently generating a large amount of data in HTML for periodic reporting purposes. The table consists of approximately 10,000 rows, totaling around 7MB in size. As a result, when users try to open it, the browser sometimes becomes unresponsive due t ...

javascriptjavahtmljson

aws-lambda Module Not Found

I am encountering an issue in the aws-lambda console every time I try to upload code from a zip file. Oddly, other zip files seem to work fine. The .js file within the problematic zip is named "CreateThumbnail.js" and I have confirmed that the handler is ...

javascriptnode.jsamazon-web-servicesaws-lambda

Combine JavaScript array objects based on their unique IDs

Looking to combine 2 arrays of objects based on IDs (ID and AUTOMOBIL). However, the current code only saves the last array of objects (OPREMA). Any suggestions on how to merge all of them correctly? If the ID in a1 is == 1, I want to save all OPREMA wher ...

javascriptarrays

Identifying periods of inactivity using an embedded iframe

I have developed a website that showcases a three.js model within an iframe. My goal is to redirect users back to the homepage (index.html) after they have been inactive for a specified amount of time. While I have managed to achieve this using JavaScript, ...

javascripthtmliframeresponsive-designthree.js

Looking to disable the back button in the browser using next.js?

How can I prevent the browser's back button from working in next.js? // not blocked... Router.onRouteChangeStart = (url) => { return false; }; Does anyone know of a way to disable the browser's back button in next.js? ...

javascriptnext.js

The Div element on my webpage is not adjusting properly to fit the size of mobile devices

My app was created using Quick flip 2, and I needed to resize it for mobile screens, so I implemented jquery-mobile. Here is the code snippet: <!--css--> <style> .quickFlip, .quickFlip3 { height: 350px; width: 400px; } .quickFlip2 { ...

androidjquerycssjquery-mobileflip

What strategies can be employed to address the limitations of a single page application?

Looking to create a dynamic single page application using Vue? Consider checking out either Vuetify or CoreUI for Vue. However, some sources claim that single page applications may not be ideal for SEO. In light of this, I'm considering the use of a m ...

twitter-bootstrapvue.jsvue-componentvuetify.jscore-ui

Having difficulty updating the parent for all PortfolioItem/Feature that were copied for a specific PortfolioItem/MMF

I'm facing a challenge in setting the parent for multiple features that I've copied for a specific MMF. However, only the parent of the last feature is being set. Below is the code snippet responsible for setting the parent: Record represents th ...

javascriptextjsextjs4rally