为什么我不能通过 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() 中声明后将新的响应属性传递给对象