个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个非常简单的 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 钩子(Hook)中初始化它，比如:
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);
}
关于javascript - 数组项循环后，使用计时器使用新数据再次重新循环它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54151131/
24
4
0
之前有人问过这个问题，但是当移动到具有相反字节序的平台(在这种情况下从大到小)时，我仍然对如何处理位域结构感到有些困惑。所以如果我有这个: typedef struct { unsigned
我之前问过这个问题here , 但它被标记为重复并已关闭。不幸的是，我被指出的答案不起作用.... 所以，再次: 我可以生成一个像这样的 eCharts4r 仪表 library(echarts4r)
关于 .NET 中对不可为空引用类型的支持存在很多问题。最大的希望是代码契约，但它仅限于对预算有限的人进行运行时检查。 对于代码契约以外的方法，Jon Skeet 写了一篇 blog post几年前，
当我通过将终止标志设置为true来停止线程'srch_slave_thread'时，(srch_slave_thread.terminate)释放线程的线程停止在析构函数的'inherited'行中，
We know that Windows 使用 CR + LF 对作为换行符，Unix(包括 Linux 和 OS X)使用单个 LF，而 MacOS 使用单个 CR。 这是否意味着 C 和 C++
This other SO question询问 WPF 中的自动完成文本框。有几个人已经构建了这些，其中给出的答案之一表明 this codeproject article . 但我还没有找到任何与
这个问题对我来说就像是噩梦的重演。该项目是使用 gpt3 训练聊天机器人，我正在试验嵌入。 我有文档，我正在尝试为不同的部分创建嵌入。根据我的测试，getEmbeddings() 似乎返回了一个值。但
我收到数据读取器初始化错误。我知道这个问题以前已经回答过很多次了，但这些案例似乎不适合我的情况。错误消息开头为“执行读取器:连接属性尚未初始化。” 程序: using System; using Sy
我知道这个问题已被多次询问和回答，但我正在抓狂，因为所提出的解决方案似乎都不起作用。 尽管有一个有效的配置文件，据我所知，它与 bundle 标识符匹配，但我收到了上述错误: 我已按照本网站上各种建议
所以我有一个小问题 这是我的文字 AFTER_2011/03/01 GREATER_2004_NOT 我想要 AFTER 和 GREATER，所以我有以下正则表达式: [A-Z]{2,}\\B 一开始
这个问题对我来说就像是噩梦的重演。该项目是使用 gpt3 训练聊天机器人，我正在试验嵌入。 我有文档，我正在尝试为不同的部分创建嵌入。根据我的测试，getEmbeddings() 似乎返回了一个值。但
我目前正在做具有图形功能的计算器应用程序。然后，我在我的计算器中有这个按钮，并将它连接到我的 Calculator2ViewController 上。此外，我将此按钮连接到另一个名为 GraphVie
昨天，我尝试以一种方式执行此操作...今天我尝试另一种方式，但仍然卡住了。我必须找到一种使用整数除法和取模来做到这一点的方法。这是我的代码，后面是错误消息。 public int evaluateFr
我大致正在处理以下内容: var i; var k = 5; $('document').ready(function () { $('#someElement').click(functio
又是realloc的问题。看来我在之前的很多realloc语句中都没有发现类似的问题。我将不胜感激您的兴趣。 我正在尝试读取格式的文本输入: g:;0,1,0,1,0 。我在源文本文件中有一组这种格式
我不知道为什么下面会给我:*“error LNK2001: unresolved external symbol 'struct Win32Vars_t win32' (?win32@@3UWin32
又是我。在我所有的问题中，我认为这是所有问题中最愚蠢的，但由于疲劳或愚蠢，我也需要一些帮助。然而，最重要的是，我这样做是为了我的一项任务，并且有一个严格的规则 - 我必须使用一个函数调用 char*
在 Ubuntu 14.04.5 上运行 MySql 5.5.53。当从文本文件导入数据时(加载数据 infil $FIL INTO TABLE &c)，我收到可怕的提示，因为 secure_file
我在 Stackoverflow 中找到了大量关于如何选择组中第一行和最后一行的示例，但我无法根据需要调整它们。唉，我对 MySQL 的有限了解无济于事。 一些数据(date_time、val1 和
我遇到错误“连接必须有效并再次打开，当我更改我的 sql 查询代码时。任何人都可以帮忙吗？？(编辑)在 form1 中我已经连接到数据库，在 form2 中我试图添加查询。 //IN Class1.c
我是一名优秀的程序员,十分优秀！