Vue On Prop Change

Posted on  by admin

Modified12 months ago. I'm a bit confused about how to change properties inside components, let's say I have the following component:.

Although it works, it would give the following warning: . 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: "visible" (found in component ).

Now I'm wondering what the best way to handle this is, obviously the visible property is passed in when created the component in the DOM: .

231231 bronze badges.

9,2422424 gold badges7171 silver badges122122 bronze badges. 7171 silver badges122122 bronze badges. Referencing the code in your fiddle.

Somehow, you should decide on one place for the state to live, not two.

I don't know whether it's more appropriate to have it just in the Alert or just in it's parent for your use case, but you should pick one. Does the parent or any sibling component depend on the state?