[Vuejs]-Something will trigger a warning in the console? Why is it not recommended and how would you fix it?

0đź‘Ť

Question is missing exact warning text so I’m just guessing the warning you talk about is probably something like this:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: "jobs"

In other words you are mutating parent’s state in child component which is not a good idea and that’s why Vue warns you.

There are several ways how to fix it:

  1. make a copy of props and store it in components data. Update internal state only. Changes will not be visible to parent
  2. Instead of mutating jobs prop, fire a custom event passing new state (returned from API call) as an argument. Parent needs to handle the event and update its own state with new value (update will flow through prop back to child component)
  3. If you are absolutely sure your printer component will be the only place where jobs object will be mutated, you can mutate object’s properties instead of replacing whole object without any warnings. This is possible but not recommended…

For more see Vue documentation or some very related SO questions

Leave a comment