如何在Vue中循环嵌套数组并每5秒显示一次数据? [英] How to loop over nested array in vue and display data every 5 seconds?

问题描述

我正在使用Vue Js，并且有一个像这样的嵌套数组:

I'm using Vue Js and I have a nested array like this:

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

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

I have a user profile box that displays name and info for each user.

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

我想在模板中显示信息:

I would like to display info in template:

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

当我这样做时，它会为正确的用户显示正确的数组，但会显示所有数字但我希望信息仅显示每个数字5秒，直到显示最后一个数字.因此，对于Max，它将显示60，然后等待5秒，然后将仅显示75，等待5秒，以此类推，直到它停在最后一个数字上，并仅显示该数字.

When I did this it showed the correct array for the correct user but it displayed all numbers but I would like info to show each number only for 5 seconds until the last number. So for Max it will display 60 then wait 5 seconds, then will only show 75 wait 5 seconds etc until it stops at the last number and only displays that number.

我尝试创建一个函数:

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

and used {{rate}} in the template

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

，但它仅显示两个配置文件的第二个用户配置文件中的数据.

but it only displayed data from the second user profile for both profiles.

所以我想知道是否可以使用v-for做到这一点，或者我该如何修改我的函数?谢谢！

So I'm wondering if there is either a way to do this with v-for or how I can modify my function? Thanks!

我像这样使用RateDisplayer组件:

I used the RateDisplayer component like so:

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

但仍仅显示最后一个数组值.

but still displayed only last arrays values.

我已从父组件中删除:

props: {
            rates: {
                required: true,
            }

        },
 
      interval: 5000,
      rate: false,

现在可以正常工作了，再次感谢！

and now it's working, thanks again!

推荐答案

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

I did something like that before. First, I suggest you to create a component JUST for this part:

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

然后，在此组件中，您可以接受速率作为支持，并将速率每5秒设置为新速率.像这样:

then, in this component you can accept rates as prop, and set rate every 5 sec to the new one. Something like:

<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秒显示一次数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！