在更新第三方JSON时，Vue.js可以自动更新视图吗？
我正在努力完成以下工作，但我甚至不知道Vue是否可能实现，因为我正在努力获得所需的结果：
我有一个API的端点，它返回数组中的许多对象。
我正在成功地呈现Vue应用程序中的数据，但我想知道Vue是否有可能“跟踪”数组何时更新了更多的对象，然后呈现出视图中的对象。
我使用setInterval每10分钟执行一次GET请求，新数据正确地进入了data()中的对象，但是更改没有反映在视图中。
目前，我在开始和结束时分别将布尔值从true更改为false，以便视图再次用v-if呈现。
我的目标是创建一个简单的Twitter提要应用程序，它每10分钟执行一次GET请求，收集tweet，将它们放到我的Vue实例中，并在视图中显示它们，而不必重新加载页面/重新呈现组件。就像一个自动的Twitter提要，它每10分钟就会不断地加载新的推文。
这有可能吗？我尝试过使用Vue.set()方法，但这并没有起到任何作用。
如果不可能，实现类似的东西的最好方法是什么？
这是我的代码：
JavaScript：
new Vue({
el: '#app',
data: {
items: [],
},
created() {
this.load();
setInterval(() => this.load(), 5000);
},
methods: {
load() {
axios.get('https://reqres.in/api/users?page=2')
.then(response => {
this.items = response.data.data;
});
}
}
});HTML
<div id="app">
<p v-for="item in items">
{{ item.first_name }}
</p>
</div>CodePen：https://codepen.io/tomhartley97/pen/VwZpZNG
在上面的代码中，如果数组是由GET请求更新的，那么在视图中没有反映机会？
回答 2
Stack Overflow用户
发布于 2019-08-24 13:13:12
是的是可能的。在Vue实例中设置新的反应性属性的方式如下：
对于对象属性：Vue.set(this.baseObject, key, value)，baseObject不能是Vue实例或基本data()对象，因此必须声明容器属性。
对于数组条目，使用本机数组方法:例如，Array.prototype.push()。使用Vue.set(array, arrayIndex, newArrayElement)不工作
因此，您的解决方案看起来可能是这样的：
<script>
export default {
data() {
return {
response: [],
};
},
mounted() {
setInterval = (() => this.getData), 600000);
}
methods: {
async getData() {
const res = await request();
const resLength = res.data.length;
for (let i = 0; i < resLength; i++) {
// check if entry is already in array
const entryExists = this.response.some((entry) => {
return entry.id === res.data[i].id
})
if (!entryExists) {
// this will make the array entries responsive, but not nested Objects
this.response.push(res.data[i]);
// to create nested responsive Objects you will have to set them explicitly
// e.g. Vue.set(this.response[this.response.indexOf(res.data[i])], nestedObjectKey, res.data[i].nestedObject)
}
}
}
}
};
</script>Stack Overflow用户
发布于 2019-08-24 13:15:08
那么，我查看代码页，我知道了为什么您的视图没有得到更新: api响应总是返回相同的数组！
尝试返回不同的数据。
api返回一个数组，因此data定义
data() {
return {
array: [] // array that api returns
}
}模板可能如下所示
<div v-for="item in array">
</div>以及更新方法
update() {
setInterval(async () => {
let resp = await api()
this.array = resp.data.concat(this.array)
}, TEN_MINUTES)
}https://stackoverflow.com/questions/57638118
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号