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
钩子中初始化它,例如:
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);
}
推荐阅读
- php - Wordpress - 显示部分内容
- spring - JPA 存储库按函数名称查询不等于
- java - 关于 Java 中的线程和回调的问题
- javascript - 根据用户选择将数据从 MYSQL 表输出到 HTML 表单
- botframework - Qnamaker API 替换变更
- node.js - 使用私钥生成加密签名
- python - Django:记录来自 REST API 中引发的异常的消息
- mysql - 嵌套多个 select 语句的性能影响
- c# - C# Selenium contains() 找不到正确的元素
- javascript - For in Javascript 不适用于来自 JSON 的事件