如何在vue中循环嵌套数组并每5秒显示一次数据？

Question

我正在使用 Vue Js，我有一个这样的嵌套数组：

    arrays: [
      {
         name: 'Max',
         Info: [60, 75, 70, 85, 65], 
      },
      {
         name: 'Dave,
         Info: [70, 95, 60, 65, 83], 
      },
     ]

我有一个用户个人资料框，显示每个用户的姓名和信息。

<div class="outer"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">

我想在模板中显示信息：

<div class="box c" >Info<span v-for="info in item.Info">{{info}}</span></div>

当我这样做时，它为正确的用户显示了正确的数组，但它显示了所有数字但是 我希望信息只显示每个数字 5 秒，直到最后一个数字 。因此对于 Max 它将显示 60 然后等待 5 秒，然后只显示 75 等待 5 秒等直到它停在最后一个数字并只显示那个数字。

我尝试创建一个函数：

  appendInfo: function() {
    
 for (let i = 0, l = this.arrays.length; i < l; i++) {
    let info = this.arrays[i]['Info'];
 
    
 let timer = 0;
   
    for (let i = 0; i < info.length; i++) {
      setTimeout(() => this.rate = info[i], timer);
      timer = timer + 5000;
      
  }
    
}

并将数据传递给 rate

return {
      count: null, 
      rate: [],

并在模板中使用了 {{rate}}

<div class="box c" >Info<span>{{rate}}</span></div>

但它只显示来自两个配置文件的第二个用户配置文件的数据。

所以我想知道是否有一种方法可以使用 v-for 执行此操作，或者我可以如何修改我的函数？谢谢！

更新

我是这样使用 RateDisplayer 组件的：

<div class="outer"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
  <rate-displayer :rates="item.Info" />

import RateDisplayer from './RateDisplayer'
export default {
  name: 'card',
  props: {
            rates: {
                required: true,
            }
        
        },
  data () {
    return {
      interval: 5000,
      rate: false,
...

但仍然只显示最后的数组值。

固定

我从父组件中移除：

props: {
            rates: {
                required: true,
            }

        },
 
      interval: 5000,
      rate: false,

现在可以使用了，再次感谢！

Answer 1

我以前做过类似的事情。首先，我建议你为这部分创建一个组件：

<div class="box c" >Info<span>{{rate}}</span></div>

然后，在此组件中，您可以接受速率作为属性，并每 5 秒将速率设置为新速率。类似于：

<template>
    <div class="box c" v-if="rate">Info<span>{{rate}}</span></div>
</template>

 export default {

   name: "RateDisplayer.vue",
        props: {
            rates: {
                required: true,
            }
        
        },
        data() {
            return {
                interval: 5000,
                rate: false
            }
        },
    mounted(){ this.nextOrStop(-1) },
    methods: { 
      nextOrStop(current)
      {
         if(current === this.rates.length-1) {  return }
         setTimeout( () => {
             const index = current+1;
             this.rate = this.rates[index];
             this.nextOrStop(index)
             }, this.interval)

    }

  ....

您可以像这样将此组件插入您的父组件中：

<div class="outer"  
     v-for="(item, index) in arrays" 
    :key="item.id" 
     v-bind:id="item.name">

         <rate-displayer :rates="item.Info" />
</div>

如何在vue中循环嵌套数组并每5秒显示一次数据？

How to loop over nested array in vue and display data every 5 seconds?

arrays

settimeout

vue.js

v-for

更新

固定

您可以像这样将此组件插入您的父组件中：