I have a h1 element with a v-for loop that displays items from my array in the following format:
<h1
v-for="(record, index) of filteredRecords"
:key="index"
:record="record"
:class="getActiveClass(record, index)"
>
<div :class="getClass(record)">
<strong v-show="record.path === 'leftoFront'"
>{{ record.description }}
</strong>
</div>
</h1>
In the code above, I am binding a class (getActiveClass(record,index)) which takes a record and an index as parameters.
This is what my getActiveClass method looks like:
getActiveClass(record, index) {
this.showMe(record);
return {
"is-active": index == this.activeSpan
};
}
The showMe method is used for setInterval to switch between records based on their time intervals. Here's how it works:
showMe(record) {
console.log(record.time)
setInterval(record => {
if (this.activeSpan === this.filteredRecords.length - 1) {
this.activeSpan = 0;
} else {
this.activeSpan++;
}
}, record.time );
},
The activeSpan variable ensures the correct switching of the 'is-active' class as shown in the code snippet above.
However, I am facing an issue where the record.time values are not functioning correctly. When printing them out, both times are logged instead of changing at the specified intervals. This results in a fast looping through the records rather than displaying each record for its designated time duration.
How can I resolve this issue and set up the intervals so that each record is displayed according to its specific time value?
FOR EXAMPLE :
filteredRecords:[
{
description:"hey you",
time:12,
id:4,
},
{
description:"hola babe",
time:43,
id:1
},
]
For instance, "hey you" should be displayed for 12 seconds, followed by "hola babe" for 43 seconds.
Thank you.