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)

而不是循環每個項目。