Listening for prop changes is something that we’ve to do often in Vue.js components.
In this article, we’ll look at how to listen for prop changes in our Vue.js components.
Watchers
Props are reactive, so we can watch for value changes with watchers.
To do this, we write:
App.vue
<template>
<div id="app">
<HelloWorld :name="name" />
<button @click="name = name === 'james' ? 'jane' : 'james'">
Change text
</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
name: "james",
};
},
};
</script>
components/HelloWorld.vue
<template>
<div class="hello">
<h1>hi, {{ name }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
name: String,
},
watch: {
name(val) {
console.log(val);
},
},
};
</script>
In App.vue , we have the name state which we pass into the HelloWorld component via the name prop.
Also, we have a button that changes the name state value when we click it.
Then in the HelloWorld component, we register the name prop with the props property.
And we watch the name prop with the watch property with name added inside it.
name is set to a method with the val parameter that lets us get the current value of the name prop.
Therefore, when we click Change text, we see the latest value of the name prop logged.
It should be consistent with the name value on the template.
We can also get the previous value of a prop with the second parameter of the watcher function.
For instance, we can write:
components/HelloWorld.vue
<template>
<div class="hello">
<h1>hi, {{ name }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
name: String,
},
watch: {
name(val, oldVal) {
console.log(val, oldVal);
},
},
};
</script>
App.vue stays the same.
oldVal has the previous value of the name prop.
Therefore, we should see the current and previous value of the name prop logged when we click the Change text button.
We can also add the deep property to watch for deeply nested properties of an object prop.
And the immediately property set to true will watch initial value of the prop.
For instance, we can write:
<template>
<div class="hello">
<h1>hi, {{ name }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
name: String,
},
watch: {
deep: true,
immediate: true,
name(val, oldVal) {
console.log(val, oldVal);
},
},
};
</script>
We set them both to true so we can watch deeply nested properties and the initial value.
Conclusion
We can listen for prop changes within a Vue.js component with a watcher.
