Как исправить ошибку setInterval?

Question

У меня есть h1 с v-for, и я записываю вещи из своего массива, это выглядит так:

 <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>

как вы можете видеть, я привязываю класс ( getActiveClass (запись, индекс) -> передать ему мою запись и индекс)

Это мой метод getActiveClass:

getActiveClass(record, index) {
      this.showMe(record);

      return {
        "is-active": index == this.activeSpan
      };
    }

я вызываю функцию с именем showMe передача моей записи на это, и здесь начинается проблема, метод showMe предназначен для моего setInterval, так что в основном то, что он делает, у меня есть несколько объектов в моем массиве, и он настраивает интервал, поэтому, когда record.time для этого одна запись заканчивается, затем происходит переход к следующей. Выглядит так:

 showMe(record) {
     console.log(record.time)
      setInterval(record => {

        if (this.activeSpan === this.filteredRecords.length - 1) {
          this.activeSpan = 0;
        } else {
          this.activeSpan++;
        }
      }, record.time );
    },

этот activeSpan проверяет, что класс is-active (см. Выше) изменяется правильно.

Теперь моя проблема в том, что record.time равно не работает правильно, когда я его распечатываю, это дает мне, например, если у меня есть два объекта в моем массиве, консоль регистрирует меня оба раза. Значит, он не меняется правильно на свою запись. Время просто меняется очень быстро, с течением времени он показывает только очень быстрый цикл по моим записям.

Почему это? как я могу настроить его правильно так, чтобы, когда я получаю одну запись, ее интервал будет record.time (что ему принадлежит), а когда запись изменяется, он снова делает то же самое (прослушивая ее record.time)

ДЛЯ ПРИМЕРА:

filteredRecords:[
{
description:"hey you",
time:12,
id:4,
},
{
description:"hola babe",
time:43,
id:1
},


]

он должен отображать сначала текст «привет, ты», он должен отображаться в течение 12 секунд, а после он должен отображать «hola babe» в течение 43 секунд. .

спасибо

Answer 1

<template>
  <h1 ...>{{ filteredRecords[index].description }}</h1>
</template>

<script>
{
  data() {
    return {
      index: 0,
      // ...
    };
  },

  methods: {
    iterate(i) {
      if (this.filteredRecords[i]) {
        this.index = i;
        window.setTimeout(() => iterate(i + 1), this.filteredRecords[i].time * 1000);
      }
    },
  },

  mounted() {
    this.iterate(0);
  },
}
</script>

Как насчет этого? Без использования v-for.