CODEWITHSUNDEEP
javascriptarraysvue.jsvuejs2
VandeputHendrik
VandeputHendrik

Reputation: 107

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

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?

Upvotes: 1

Views: 882

Answers (1)

Fernando Vidigal
Fernando Vidigal

Reputation: 345

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}%;`"

Upvotes: 1

Related Questions