Vue: Push element to array which is in object

Question

I have the following structure:

data: () => ({
  loadProgress: [{}]
})

example structure of loadProgress

[{
  itemId: 1,
  details:[{}, {}, {}]
}, {
  itemId: 2,
  details: [{}, {}, {}, {}]
}]

how I can do this.loadProgress[index].details.push(...) to achieve reactivity?

I'm rendering it with v-for where :key is item.itemId

Your queation is not very clear. What have you already tried. Can you give actual code you tried? — Tsepo Nkalai
– Tsepo Nkalai, Commented Jan 23, 2020 at 11:19
this.loadProgress[index].details.push(...) this is what I've already tried, I have event listener which is giving me one object which needs to be added to an array which I've mentioned earlier. — hejkerooo
– hejkerooo, Commented Jan 23, 2020 at 11:22
ok, can you show the v-for code and show the exact place it is not working. I understand your question, but seeing your implementation will help give a proper answer to your problem. But there are known issues with array reactivity and this link can help vuejs.org/v2/guide/list.html#Array-Change-Detection — Tsepo Nkalai
– Tsepo Nkalai, Commented Jan 23, 2020 at 11:35

Rajeev · Accepted Answer · 2020-01-23 11:36:54Z

1

You can use vue $set method. By default vue does'not wast changes on deep nested object so you should use like this:

this.loadProgress[index].details.$set(index, val);
or
this.$set(this.loadProgress[index].details, index, val);

answered Jan 23, 2020 at 11:36

Rajeev

3594 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1