In the VueJs 2.0 docs I can't find any hooks that would listen on props changes.
Does VueJs have such hooks like onPropsUpdated() or similar?
Update
As @wostex suggested, I tried to watch my property but nothing changed. Then I realized that I've got a special case:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
I am passing myProp that the parent component receives to the child component. Then the watch: {myProp: ...} is not working.
You can watch props to execute some code upon props changes:
new Vue({
el: '#app',
data: {
text: 'Hello'
},
components: {
'child' : {
template: `<p>{{ myprop }}</p>`,
props: ['myprop'],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
}
}
}
}
});<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<child :myprop="text"></child>
<button @click="text = 'Another text'">Change text</button>
</div>Have you tried this ?
watch: {
myProp: {
// the callback will be called immediately after the start of the observation
immediate: true,
handler (val, oldVal) {
// do your stuff
}
}
}
In my case I needed a solution where anytime any props would change, I needed to parse my data again. I was tired of making separated watcher for all my props, so I used this:
watch: {
$props: {
handler() {
this.parseData();
},
deep: true,
immediate: true,
},
},
Key point to take away from this example is to use deep: true so it not only watches $props but also it's nested values like e.g. props.myProp
You can learn more about this extended watch options here: https://vuejs.org/v2/api/#vm-watch