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

Question

I have a data method thats setup like this:

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

In my mounted method I retrieve data for my queue attribute. The data structure of my queue is there are objects inside it, and each object has an array of objects. (look at screenshot below)

Now after my retrieve is completed I periodically check if some timestamps are greater than 1 hour ago and set either true/false on a new attribute like so:

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)
    });

In my Vue.js component when I iterate over my queue object I can read/diplay the items from the queue fine, eg queue_entry_time_ms , but when I print out past_grace nothing is shown.

Here is what my code looks like:

<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>

In the Vue.js debugger I can see the attribute is set like below:

Is there something I am doing wrong?

Answer 1

I have experienced this myself. For my issue, the new attribute passed to the object wasn't responsive because Vue wasn't watching for it to change.

My solution was to use Vue.set(), documented here: https://v2.vuejs.org/v2/api/#Vue-set

It allows you to pass a new responsive attribute to an object after the object is first declared in data()