為什么我不能通過 Vue.js 訪問我的對象中動態插入的屬性？

Question

我有一個這樣設置的數據方法：

data () {
     return {
          live_count: null,
          queue: null,
     }
}

在我的mounted方法中，我檢索queue屬性的數據。 我的隊列的數據結構是里面有對象，每個對象都有一個對象數組。 （看下面的截圖）

現在，在我的檢索完成后，我會定期檢查某些時間戳是否大於 1 小時前，並在新屬性上設置真/假，如下所示：

axios
.get(`/my-queue`)
    .then(response => {
        this.queue = response.data.queue
    })
    .catch(error => {
        console.log(error)
        this.errored = true
    })
    .finally(() => {
        this.loading = false;
        this._timer = setInterval(() => {
            console.log('check queue rows');
            const anHourAgo = Date.now() - (60 * 60 * 1000)
            for (const [lane_id, items] of Object.entries(this.queue)) {
                console.log('lane id: ' + lane_id);
                for(const item of items) {
                    item.past_grace = item.queue_entry_time_ms > anHourAgo
                }
            }
        }, 1000)
    });

在我的 Vue.js 組件中，當我迭代queue對象時，我可以很好地讀取/顯示隊列中的項目，例如queue_entry_time_ms ，但是當我打印出past_grace時，什么也沒有顯示。

這是我的代碼的樣子：

<template v-for="(lane, lane_id) in queue">
    <template v-for="(item, index) in lane">
        {{ item.queue_entry_time_ms }} <!-- this prints fine -->
        {{ item.past_grace }} <!-- this doesnt -->
    </template>
</template>

在 Vue.js 調試器中，我可以看到屬性設置如下：

有什么我做錯了嗎？

Answer 1

我自己也經歷過。 對於我的問題，傳遞給對象的新屬性沒有響應，因為 Vue 沒有注意它的變化。

我的解決方案是使用 Vue.set()，記錄在這里： https ://v2.vuejs.org/v2/api/#Vue-set

它允許您在對象首次在 data() 中聲明后將新的響應屬性傳遞給對象