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

Posted 2023-02-22

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

【英文标题】：How to loop over nested array in vue and display data every 5 seconds?

【发布时间】：2020-10-19 18:55:58

【问题描述】：

我正在使用 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;
      
  
    

并将数据传递给速率

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,

现在它正在工作，再次感谢！

【参考方案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>

【讨论】：

非常感谢，这非常有用！尽管它只显示最后一个数组的信息，但我仍然遇到问题。它每 5 秒显示一次每个数字，但仅显示每个用户的最后一个数组中的数字。有没有办法可以显示每个用户正确的数组值？

我刚刚更改了答案，包括您应该如何在父组件中使用新组件。

谢谢！不过似乎仍然只显示最后一个数组的数字。

这不应该发生。您能否在原始答案中粘贴一个更新，说明您是如何使用此组件的？您描述的行为通常发生在未命名的组件上。

谢谢，我已经更新了我如何使用该组件。