Recently, I started learning Vue. One issue I encountered is with an AJAX request that updates an object used in my Pug template at intervals. Strangely, while referencing the data using double curly brackets works fine on its own, it becomes undefined and breaks the component when used within a loop like forEach.
<template lang="pug">
.mycomponent
p {{ data }} <- this reference to data works fine
if data != undefined <- this reference to data is undefined
each val, index in data
li= val + ': ' + index
</template>
To update the data, I'm trying:
mounted () {
setInterval(() => {
axios.get('http://localhost:3000/api/info')
.catch((error) => console.log(error.request))
.then(response => {
this.data = response.data
})
},
3000)
},
Can someone help me understand why 'data' is becoming undefined?