vuejs: changing width of <div> based on 2 variables from array in a vuejs for each loop

Question

I am just starting with vuejs and stuck on how it works.

Currently I have a small 'vuejs for each-loop' on a div that takes information from a json object. I'm trying to calculate the current distance over a maximum distance and have it influence the with of a div.

current html:

<div id="visuals" class="col-lg-9 col-sm-12 wow fadeInUp pt-5 pt-lg-0">
    <div v-for="element in sortedClubs">
        <div class="progessbar-title">{{ element.Name }}</div>
        <div class="progress progressvisual">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                {{ element.km }} km
            </div>
        </div>
    </div>
</div>

current vuejs:

var app = new Vue({
        el: '#visuals',
        data: {elements: [
            {"Name":"a","km":"1361"},
            {"Name":"b","km":"6409"},
            {"Name":"c","km":"1067"}]},
        computed: {
            sortedClubs: function() {
                function compare(a, b) {
                    if (a.km_lopen > b.km_lopen)
                        return -1;
                    if (a.km_lopen < b.km_lopen)
                        return 1;
                    return 0;
                }

                return this.elements.sort(compare);
            }
        }
    });

Since the list is sorted high to low, I can take the maximum value with sortedClubs[0].km

But how do I change the with of the progress-bar div based on the element.km/sortedClubs[0].km*100 as a percentage so that each div will have it's percentage?

Fernando Vidigal · Accepted Answer · 2021-03-07 00:13:09Z

1

You can make the style dynamic adding : before it. Then with :style you can pass the percentage instead of hardcoded 50%.

something like

:style="`width: ${element.km/sortedClubs[0].km * 100}%;`"

answered Mar 7, 2021 at 0:13

Fernando Vidigal

3452 silver badges8 bronze badges

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

2 Comments

VandeputHendrik Over a year ago

This indeed is the solution, why are the 2 types of quotation marks needed? And why specific the ` type?

Fernando Vidigal Over a year ago

You could also use :style="{ width: element.km/sortedClubs[0].km * 100 + '%' }" this would be the case for adding more fields to dynamic style. as of :style="width: ${element.km/sortedClubs[0].km * 100}%;" The first quotation is default for vue. in react you wrap the value with {} in vue you wrap with "" The second one ` is for making an actual string and allow some javascript inside it with ${}

Collectives™ on Stack Overflow

vuejs: changing width of <div> based on 2 variables from array in a vuejs for each loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related