How to listen for 'props' changes
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 } }}
He,
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 seperated 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