Vue.js push to object which was passed through as a prop

Question

I am trying to push an object to a prop in Vue.js.

The prop originates from the main script, and is passed into the Car component as a prop. From the Car component I'm trying to do this.propName.push({key:value});

An exception then tells me that push is not a function. If I console.log() the propName beforehand, I can see that observers are attached, and I do have a get and set propName method.

If I try to do the same push from the main script it works, sortof, if I do mainScriptObject[0].push({key:value}); I get the same error. (here mainScriptVariable[0] is the value passed as the prop.

TLDR:How do I push to an object passed through as a prop in Vue.js?

Answer 1

Seems like you're trying to add to an Object .

First of all make sure you're using two-way binding on the prop using .sync .

<component prop-name.sync="mainObject"></component>

Then instead of push ing into the object, just create a new property in the object within your nested component.

this.propName.newKey = 'newValue';