人到中年有點(diǎn)甜
2022-12-22 12:52:22
我有一個(gè)帶 v-for 的 h1,我正在從我的數(shù)組中寫出一些東西,它看起來(lái)像這樣: <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>如您所見(jiàn),我綁定了一個(gè)類(getActiveClass(record,index) --> 將我的記錄和索引傳遞給它)這是我的 getActiveClass 方法:getActiveClass(record, index) { this.showMe(record); return { "is-active": index == this.activeSpan }; }我正在調(diào)用一個(gè)名為showMe的函數(shù),將我的記錄傳遞給它,這就是問(wèn)題開始的地方 showMe 方法是針對(duì)我的 setInterval 所以基本上它的作用是我的數(shù)組中有多個(gè)對(duì)象并且它正在設(shè)置間隔所以當(dāng)記錄.該記錄的時(shí)間結(jié)束,然后切換到下一個(gè)記錄。看起來(lái)像這樣: showMe(record) { console.log(record.time) setInterval(record => { if (this.activeSpan === this.filteredRecords.length - 1) { this.activeSpan = 0; } else { this.activeSpan++; } }, record.time ); },此 activeSpan 確?!癷s-active”類(見(jiàn)上文)正確更改。現(xiàn)在我的問(wèn)題是,當(dāng)我打印它時(shí),record.time 無(wú)法正常工作,例如,如果我的數(shù)組中有兩個(gè)對(duì)象,它會(huì)在控制臺(tái)記錄我兩次。所以它沒(méi)有正確地改變到它的記錄。時(shí)間它只是變化得非???,隨著時(shí)間的流逝,它顯示了我的記錄中非??焖俚难h(huán)。這是為什么?我怎樣才能正確設(shè)置它,以便當(dāng)我獲得一條記錄時(shí),它的間隔將是 record.time(屬于它的),并且當(dāng)記錄更改時(shí)它再次執(zhí)行相同的操作(收聽它的 record.time)例如 :filteredRecords:[{description:"hey you",time:12,id:4,},{description:"hola babe",time:43,id:1},]它應(yīng)該首先顯示“嘿你”文本,它應(yīng)該顯示 12 秒,然后它應(yīng)該顯示“hola babe”43 秒。
1 回答

開滿天機(jī)
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
<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>
這個(gè)怎么樣?不使用v-for.
添加回答
舉報(bào)
0/150
提交
取消