I am working with HTML code that looks like this:
<div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat">
<div class="stats">
{% verbatim %}
<div>{{ s.proc1 }}</div>
<div class="statid">{{ s.name }}</div>
<div>{{ s.proc2 }}</div>
{% endverbatim %}
</div>
<div class="belt1">
<div class="belt2" :style="Style(k)"></div>
</div>
</div>
In my Vue object stored in data, I have the following information:
statistics: [
{name: 'Possession', proc1: 60, proc2: 40, id: 1},
{name: 'Shoots', proc1: 65, proc2: 4, id: 2},
{name: 'Passes', proc1: 64, proc2: 40, id: 3},
{name: 'Fauls', proc1: 44, proc2: 4, id: 4}
],
In my methods section, I have defined the following function:
Style: function(k){
switch(k)
{
case 1:
return { width: statistics[0].proc1 }
case 2:
return { width: statistics[1].proc1 }
case 3:
return { width: statistics[2].proc1 }
case 4:
return { width: statistics[3].proc1 }
}
}
However, I am facing an issue with the code. How can I properly set the percentage of width for each belt using the Style method?