时间戳

首页 > 解决方案 > 如何在vue中循环嵌套数组并每5秒显示一次数据？

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

问题描述

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

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

标签： arraysvue.jssettimeoutv-for

解决方案

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

<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>

推荐阅读