如何修复 setInterval 错误？

Question

我有一个带 v-for 的 h1，我正在从我的数组中写出东西，它看起来像这样：

 <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(record,index) --> 将我的记录和索引传递给它）

这是我的 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
},


]

它应该首先显示“hey you”文本，它应该显示 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。