[Vuejs]-Vue prop auto emitting nested data to parent component

2👍

let activeDesign = this.test; here actually
value of this.test is not copied to activeDesign instead it is only referencing to parent’s test data.
You need to copy value of this.test.
you can do something like this
images: (activeDesign) ? [...activeDesign.images] : [],
or use cloneDeep function of lodash
let activeDesign = cloneDeep(this.test);

0👍

Please see this page in the Vuejs documentation:
https://v2.vuejs.org/v2/guide/components.html

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child will affect parent state.

To fix the problem, you can use clone, or you can also break out your attributes to send only simple types which are not passed by reference.

A better solution could be to use Vuex as a central store, since the core of your problem seems to be that you are using parent as your main data reference, which can get tricky due to these kind of issues. With Vuex, you will have explicit control over your data.

Good luck

Leave a comment