[Vuejs]-How to prevent props from reseting when child component updates?

0👍

You cant stop it – in Vue props are One-Way Data Flow only. If you open the browser Dev Tools you should see error message from Vue telling you exactly this.

Changing relationlist sort of works because you are updating the array in-place (modifying existing instance instead of replacing it ….which is not possible with numbers etc.) but if you try something else (for example creating new array with filter), it will stop working too.

Only correct way around it is to emit event and let the parent component (owner of the data) to do the modifications (google "props down events up"). This of course becomes harder and harder as the depth of the component tree and the distance between data owner and child component increases. And that’s one of the reasons why global state management tools like Vuex exist….

Another way is to pass the data by single prop of type Object. As long as you only modify object’s properties (not replacing the object itself), it will work. But this not recommended and considered anti-pattern…

Leave a comment