I am in need of watching a prop that is an object, so here is my script:
<script>
export default {
watch:{
filter: {
handler:(newval)=> {
console.log("I have new data",newval) //this works
this.fetchData(); //throws an error
},
deep: true
}
},
props:{
filter:{
type:Object,
required:true
}
},
data: () => ({
pagination: {},
items: []
}),
methods:{
fetchData(){
console.log("Fetching the data...");
}
}
}
The watcher above successfully displays the new value in the console, but when I try to execute a method within the watch, I encounter an error. The error message reads "Error in callback for watcher 'filter': 'TypeError: _this.fetchData is not a function'". How can I properly execute a method within a deep watcher?