I do not know if this is possible.
I have elements of this type:
<ul>
<li></li>
<li></li>
<li></li>
... hasta n li
</ul>
What I need is to count how many there are to make a calculation. The problem is that they appear dynamically and I do not want to process this with javascript.
This is what I am doing.
and what I want is to know how many vollings appear
At the moment I am indicating it manually, but I want it to be done automatically.
In Sass, I'm calculating the width of the progressbar
That's how the balls are painted
The most of the code is to modify other things. So it's not relevant to this case.
This is the code in sass
.progress_position {
position: absolute;
top: -20px;
margin-left: 0.9%;
width: 100% - 100/$a - 1/$a;
display: flex;
justify-content: center;
z-index: 0;
}
%remain-steps {
&:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 800;
}
&:after {
background-color: $grey-light;
}
}
.multi-steps {
display: table;
table-layout: fixed;
width: 100%;
>li {
counter-increment: stepNum;
text-align: center;
display: table-cell;
color: $checked;
position: relative;
&:before {
content: '\f00c';
content: '13;';
content: '003';
content: '004';
content: '13';
display: block;
margin: 0 auto 4px;
background-color: $white;
width: 38px;
height: 38px;
line-height: 32px;
text-align: center;
font-weight: bold;
border: {
width: 2.5px;
color: $checked;
style: solid;
radius: 50%;
}
}
&:last-child {
&:after {
display: none;
}
}
&.is-active {
@extend %remain-steps;
color: $brand-primary;
&:before {
background-color: $white;
border-color: $brand-primary;
}
~li {
color: #808080 !important;
@extend %remain-steps;
&:before {
background-color: $grey-light;
border-color: $grey-light;
}
}
}
}
}This is the component code that is echoed in vuetify
<template>
<div class="container_progress mt-3">
<div class=" progress_position">
<v-progress-linear class="" v-model="progress"></v-progress-linear>
</div>
<ul class="multi-steps">
<li class="is-active" v-for="(point, index) in items" :id="'stepper-'+index">
<span class="link-progress-bar" @click="clickInItem(index)" v-if="isNaN(point.NombreDeSeccion)">
{{ point.title }}
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [{
title: 'uno',
},
{
title: 'dos',
},
{
title: 'tres',
},
{
title: 'cuatro'
},
{
title: 'cinco'
},
{
title: 'seis'
},
{
title: 'siete'
}
],
progress: 15
}
},
}
</script>