为什么我不能通过 Vue.js 访问对象中动态插入的属性？

Question

我有一个这样设置的数据方法：data () {     return {          live_count: null,          queue: null,     }}在我的mounted方法中，我为我的属性检索数据queue。我队列的数据结构是里面有对象，每个对象都有一个对象数组。（看下面的截图）现在，在我的检索完成后，我会定期检查一些时间戳是否大于 1 小时前，并在新属性上设置 true/false，如下所示：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()，它允许您在对象首次在 data() 中声明后将新的响应属性传递给对象