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方法ways to rerender component

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://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)

而不是循环播放每个项目。

Vue v-for不会直接更新

3 个答案: