I'm currently developing a small application using vue.js where I am making some post requests to an API. I have implemented the watch method to monitor changes in the API, updating the component upon successful post requests. However, as the watcher continuously checks the API, I attempted to incorporate the ._debounce method without success.
Here is the relevant code snippet:
<script>
import _ from 'lodash'
export default {
data () {
return {
cds: [],
cdCount: ''
}
},
watch: {
cds() {
this.fetchAll()
}
},
methods: {
fetchAll: _.debounce(() => {
this.$http.get('/api/cds')
.then(response => {
this.cds = response.body
this.cdCount = response.body.length
})
})
},
created() {
this.fetchAll();
}
}
</script>
Unfortunately, this implementation results in the following error:
Cannot read property 'get' of undefinedI would greatly appreciate any assistance or suggestions on what might be causing this issue.
EDIT
After removing the watch method, I attempted to add
updated(): {
this.fetchAll()
}
This led to the request running in a loop :-/ Removing the updated lifecycle function causes the component to not respond to changes in the API or array. At this point, I'm feeling quite lost and unsure of how to proceed.