如何修复 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 所以基本上它的作用是我的数组中有多个对象并且它正在设置间隔所以当记录.该记录的时间结束，然后切换到下一个记录。看起来像这样：

 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>&nbsp; <h1 ...>{{ filteredRecords[index].description }}</h1></template><script>{&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; index: 0,&nbsp; &nbsp; &nbsp; // ...&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; iterate(i) {&nbsp; &nbsp; &nbsp; if (this.filteredRecords[i]) {&nbsp; &nbsp; &nbsp; &nbsp; this.index = i;&nbsp; &nbsp; &nbsp; &nbsp; window.setTimeout(() => iterate(i + 1), this.filteredRecords[i].time * 1000);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; this.iterate(0);&nbsp; },}</script>这个怎么样？不使用v-for.