I want to make a network request every time a certain value in my state updates. I want the network request function to be called only when that particular value changes. In React I’do something like this
componentDidUpdate(prevProps, prevState){ if(prevState.update !== this.state.update){ // Fetch data... } }
How can I replicate this in Vue, can I do it from the updated()
lifecycle hooks? I can’t seem to catch previous props or state value
Advertisement
Answer
You can use watchers. Also you can take a look at the example below:
new Vue({ el: '#app', data() { return { message: 'initial message' } }, watch:{ message(newVal, oldVal){ if(oldVal != newVal) { console.log('message updated.'); console.log('oldVal:', oldVal); console.log('newVal:', newVal); } } }, mounted() { setTimeout(()=>{ this.message = 'updated message' }, 3000); } });
Here is the jsfiddle
You can read more about watch api