数组项循环后，使用计时器再次使用新数据重新循环它们

Posted 2023-02-22

技术标签:

【中文标题】数组项循环后，使用计时器再次使用新数据重新循环它们【英文标题】：After array items loop, re-loop them again with new data using a timer 【发布时间】：2019-06-06 15:32:56 【问题描述】：

我有一个非常简单的 v-for 数组循环，它从 Axios 抓取数据并将其显示在新闻卷中，该卷将自动显示每个新闻项目，一个接一个。这很好用，但几分钟后它会用完项目并显示一个空白 div，因为 API 上只有大约 30 个新闻项目。

我需要什么

在 v-for 数组用完项目后，我只想重新运行它。获取 API（因为 API 项每 30 秒更改一次），然后重新运行 v-for 数组，而无需用户刷新页面。

如下所示的Axios调用

axios.get('https://myapi/news_list')
   .then(response => 
        this.news = response.data
   );

模板

<ul class="news-reel">
    <li v-for="name in news">

       <a :href="name.url">name.title</a>

    </li>
</ul>

** 编辑 **

当我说它自动显示每个项目时，ul 只是有一个类动画，可以像新闻字幕卷轴一样滚动（或滑动）新闻项目。就是这样。

【问题讨论】：

我不确定我们看到的足够多，无法很好地了解您所描述的内容。听起来您说某处有一个计时器，但我们在这里看不到任何计时器，因此很难给出解决方案。这只是一个非常简单的类，它可以像新闻卷轴一样滚动项目。我在编辑中添加了更多内容。 【参考方案1】：

您可以使用在created 钩子中初始化它的计时器，例如：

 created()
      setInterval(()=>
            axios.get('https://myapi/news_list')
               .then(response => 
                    this.news = response.data
               );
        ,30000);

模拟的完整示例

new Vue(
  el: '#app',
  data() 
    return 
      news: [],
      index: 0
    
  ,
  computed: 
    cptNews() 
      return this.news.map((n, i) => 
        let t = n;
        t.id = i;
        return t;
      )
    
  ,
  created() 
    setInterval(() => 

      let n = ;
      n.title = "News " + this.index;
      n.url = "https://myapi/news_list/" + this.index;
      this.news.push(n)
      this.index++;
    , 4000);
  
);

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul class="news-reel">
      <li v-for="name in cptNews">
        <span>name.id</span>
        <a :href="name.url">name.title</a>

      </li>
    </ul>
  </div>
</body>

你的代码应该是这样的（不用mounted）：

data() 
    return 
      news: []

    ;
  ,
  created() 
    setInterval(() => 
      axios.get('https://myapi.co/news/')
        .then(response => 
          this.news = response.data.data
        );

    , 4000);

【讨论】：

这不起作用，我只是粘贴了您的代码，它确实每 30 秒重新调用 chrome 开发人员网络选项卡中的 API，但实际上并没有重新运行 v-for数组或更新当前的 v-for 数组。如果你检查 vue devtools news 数组的内容是什么？它正在更改数组项目，但新闻卷轴仍然没有项目。无论如何要每 30 秒重新运行一次数组函数本身以便循环？我通过一个模拟您的用例的示例更新了我的答案，它应该可以工作，因为您的新闻数据项是反应性的这似乎也是最有意义的，它将项目添加到数组中但不正确。看这个截图：imgur.com/a/xRVTE39 如你所见，新闻项目以 89 结尾，然后每 4 秒添加新闻项目文本，但不是实际对象

以上是关于数组项循环后，使用计时器再次使用新数据重新循环它们的主要内容，如果未能解决你的问题，请参考以下文章

拿到数组数据后重新循环得到新数组。

如何在反应原生渲染中以无限循环返回数组项视图？

循环遍历对象数组，并将它们转换为 UL 中的 LI 项 [重复]

拨打电话号码列表并返回活动

使用带有 JavaScript 的 for 循环时，将新列表项添加到 <ul> 项 [重复]

在循环中暂停并重新启动 setTimeout