Vue: Object reactivity caveat?

[cloud-tribal]

Caveats

Due to limitations in JavaScript, Vue cannot detect the following changes to an array (...)

Is this the case for objects as well?

This fails:

state.sportType.sports[keyToAdd] = {...sportPrototype}

where sports is an object; and this passes:

Vue.set(state.sportType.sports, sportsLength, keyToAdd)

[andreiglingeanu]

Yes, that's the case for objects as well. Whenever you add new properties to objects you should use Vue.set.

[posva]

As @andreiglingeanu pointed out, yes. Next time, please ask questions on the forum or StackOverflow. The issues are for bugs and feature requests only

edit: It's the same if keyToAdd isn't present on the object, which is what I thought because of the name

[cloud-tribal]

Posted this here to specify that it should probably be updated in the List Rendering docs, which mention this caveat for arrays only. (Despite it being mentioned in Reactivity)

[yyx990803]

Array indices and Object properties are not the same thing.

[LinusBorg]

Yeah, it's not really the same thing.

• For arrays, array[index] = 'something' can never be detected.
• For objects, object['key'] = 'something' can be detected for existing properties - it's only a problem when trying to add new props this way (for which we have to use Vue.set())