Once my VueJS 2 component loads, I fill a props variable with data. Here's how it's done:
created() {
this.events = null
Service.getEvents()
.then(response => {
this.events = response.data
})
.catch(error => {
console.log(error.response)
})
}
}
Now, I'm looking to refresh the component with the "events" props when the user clicks on a next page link. I came across a VueJS 3 tutorial that demonstrates how to achieve this using the watchEffect method (https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watcheffect)
Does anyone know how I can achieve similar functionality in VueJS 2?
I attempted to use the watch() method on the "events" variable, but it leads to an infinite recursion due to the changes being made to the "events" object inside the method.
//Error - recusrsion
watch: {
events() {
this.events = null
Service.getEvents()
.then(response => {
console.log(response.data)
this.events = response.data
})
.catch(error => {
console.log(error.response)
})
}
},
Any idea on how I can reload the events on the same page when the user interacts with a button or link?