Vue.set() on nested array properties

Question

i've been trying to trigger Vue DOM updates by updating an array the old way and it obviously wont do it because of the ceveats on Vue detecting object/array changes. I dont know how to access my nested array properties by using Vue.set. Normally i would access and assign my property like this (by the way this is a state in Vuex):

state.timelines[0].events[0].item.info = payload.info

I dont know how to access and assign that property with .set, i've tried a few combinations but they failed to work. Thanks.

How is your timelines state before you trying to update it like that? I mean, is it an empty array? If not, is events an empty array? And so on. — acdcjunior
– acdcjunior, Commented Mar 9, 2018 at 0:13
I got it right!, i thought i was manipulating an array, but in fact i was trying to alter the "item" object, so i used Vue.set(state.timelines[i].events[0].item, 'info', payload.info) and its now working properly. Thanks for your answer. — Patex
– Patex, Commented Mar 9, 2018 at 0:26
Yeah, nice. It really depended on your case, but since you worked it out, then that's it. Btw, should we add a generic answer or will you delete the question? — acdcjunior
– acdcjunior, Commented Mar 9, 2018 at 0:30

Patex · Accepted Answer · 2019-03-21 03:01:20Z

2

Solution: when trying to alter an object property, even if its deep in nested arrays, just use: Vue.set(arrayA[indexA].arrayB[indexB].object('objectPropertyName', newValue))

If dealing with arrays use: Vue.set(array, arrayIndex, newValue).

edited Mar 21, 2019 at 3:01

answered Mar 14, 2018 at 3:37

Patex

671 silver badge8 bronze badges

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

1 Comment

Aditya Kresna Permana Over a year ago

did you missing something like closing parenthesis on your code example there ?

Collectives™ on Stack Overflow

Vue.set() on nested array properties

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related