Vue Update Prop

Posted on  by admin
In this tutorial, you’ll learn how to watch props for changes in Vue.js.

When you pass data as a prop to a component it will be updated reactively. But if you need to call a method or perform some other actions on prop changes this code will help you.

If the yourProp changes, the yourPropChanged property will become true.

Hi, I'm Renat 👋.

If you find this post useful, please let me know in the comments below and subscribe to my newsletter.

Cheers,Renat Galyamov. Want to share this with your friends?👉


how to password protect your website in Vue.js,where to put variables in Vue.js components, how to deploy Vue.js app to Firebase hosting. Modified1 year, 2 months ago. I have a component and i am passing value 543 to props :prop-room-selected,.

Now, From a button click, i am calling the function updateCoachStatus to change the value of propRoomSelected, but the props value is not updating.

I dont know how to change the value of props from function. Is it possible in Vue to update the value of props?? 22 gold badges1616 silver badges2626 bronze badges.

2626 bronze badges. What you are doing will throw a warning in Vue (in the console).


Answer originally edited into question by OP @Marek, copied here by the community.

Prop being mutated: "propRoomSelected". The value will actually change inside the component, but not outside the component.

The value of a parent property cannot be changed inside a component, and, in fact, the updated value will be lost if the parent re-renders for any reason.

Not the answer you're looking for? Browse other questions tagged typescriptvuejs2vue-component or ask your own question.