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

我有一个非常简单的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只是有一个类动画，可以滚动（或滑动）新闻项目，就像一个新闻字幕卷。仅此而已。

您可以使用一个计时器，在

创建的

钩子中对其进行初始化，如下所示：

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

模拟的完整示例

newvue({
el:“#应用程序”，
数据（）{
返回{
新闻：[]，
索引：0
}
},
计算：{
cptNews（）{
返回此.news.map（（n，i）=>{
设t=n；
t、 id=i；
返回t；
})
}
},
创建（）{
设置间隔（（）=>{
设n={}；
n、 title=“News”+this.index；
n、 url=”https://myapi/news_list/“+这一指数；
这个。新闻。推（n）
这个.index++；
}, 4000);
}
});

JS-Bin


{{name.id}


我不确定我们是否看到了足够多的内容，无法很好地了解您所描述的内容。听起来好像你在说某个地方有计时器，但我们在这里看不到任何计时器，因此很难制定解决方案。它只是一个非常简单的
类，可以像新闻卷轴一样滚动项目。我在编辑中添加了更多内容。这不起作用，我只是粘贴了你的代码，它会每隔30秒在chrome developer network选项卡中重新调用API，但实际上不会重新运行v-for数组或更新当前的v-for数组。如果你检查vue devtools，
新闻
数组的内容是什么？它正在更改数组项，但新闻短片的内容仍然没有了。是否需要每隔30秒重新运行数组函数本身以使其循环？我通过一个模拟您的用例的示例更新了我的答案，它应该可以工作，因为您的新闻数据项是反应的。这似乎太有意义了，它正在将项添加到数组中，但不正确。看这个屏幕截图：正如你所看到的，新闻项目在89结束，然后每4秒添加一个新闻项目文本，但不是一个实际的对象