Vue v-for 不直接更新

Question

已解决：我的错误。问题出在我的代码逻辑中，tempLatest 数组始终为空，因此包含卡的数组从未更新过。 顺便说一句，谢谢你的所有回答

我想创建一个显示卡片集合的程序。 该集合将每 15 秒更新一次。 但是问题来了，当新卡添加到列表时 v-for 不会直接更新，但是当页面刷新时它会显示正确的输出。

这是我的代码

<PersonCard v-for="item in latest" v-bind:key="item.id" :attendeeName="item.name" :image="item.picture" :department="item.department"/>

data() {
        return {
            latest: [],
            imgArr: [],
            notReady: true,
        }
    }

created() {
        console.log(this.site, this.sinceTime)
        this.fetchRecognizedFace();
        this.timer = setInterval(this.fetchRecognizedFace, 15000);
    }

// update this.latest
for (var j = 0; j < tempLatest.length; j++) {
    this.latest.unshift(tempLatest[j]);
}

Answer 1

使用 vue forceUpdate 方法重新渲染组件

import Vue from 'vue';
Vue.forceUpdate();

更新最新变量后，调用此变量

this.$forceUpdate();

Answer 2

尝试使用 vue 版本为1.0.28 https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js

Answer 3

在 Vue 中如何重新激活数组存在一些限制（参见： https ://v2.vuejs.org/v2/guide/list.html#Caveats）。

考虑到这一点，当您进行更新时，请这样做：

for (var j = 0; j < tempLatest.length; j++) {
    this.$set(this.latest, j, tempLatest[j]);
}

注意：我没有使用您的代码对此进行测试，因此您可能需要稍微玩一下，因为您当前正在循环临时列表并且索引可能不匹配，但$set是要走的路。 你也可以试试：

this.$set(this, 'latest', tempLatest)

而不是循环每个项目。