Accessing CSS style with Vue.js

Question

I am trying to make website and I need to get access to my style thorough Vue.

I need to access CSS with Vue because style .skill-bar is background of bar and .skill-bar-fill is green filament which is supposed to have width based on number defined in Vue:

So I mean how can I change style of this .skill-bar-fill anytime I want by just changing number in Vue? How can I change width of .skill-bar-fill separately in every item?

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, },

            }

        }
    }

And I am trying

Boussadjra Brahim · Accepted Answer · 2020-07-29 21:18:29Z

1

Keep the class skill-bar-fill and use style binding :

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

You couldn't modify a property of that class since it's not unique and each item is unique.

edited Jul 29, 2020 at 21:18

answered Jul 29, 2020 at 21:08

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 05:52:20Z

This answer is based on original question. Your requirement has been simplified so your solution is fine and below is probably not required

For the first instance, you could use a CSS variable for the width attribute, and programatically change the variable. For subsequence instances, this won't work by itself because they share the CSS so for those you'd need an object style syntax.

Pass a property to the first child so it knows it's the first one and it needs to set the variable

Setting CSS variable in Vue: Add var into css class

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

It's not clear to me why you the width of divs needs to reference the first uncle - what if the second skill is higher than the first? - but the above might be the answer.

Collectives™ on Stack Overflow

Accessing CSS style with Vue.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related