As a beginner in vuejs, I am facing a challenge in understanding its functionality.
Currently, I have implemented a 'vuejs for each-loop' within a div to fetch data from a JSON object. My goal is to calculate the current distance relative to a maximum distance and reflect this ratio as the width of a div.
Current HTML code:
<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 code:
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);
}
}
});
As the list is sorted from high to low, I can determine the maximum value with sortedClubs[0].km
However, I am unsure about how to adjust the width of the progress-bar div based on the formula element.km/sortedClubs[0].km*100 to represent each div's percentage. Any insights on this would be appreciated!