Within my Vue.js project, I am making a request using the Axios package in the created() hook. The response data is being added to an array named coordinates. However, I am encountering an issue when trying to access this array outside of the created() hook, such as in the mounted() hook or within methods defined in the methods property.
Currently, when attempting to reference self.coordinates outside of the created() hook, it returns undefined. Using this.coordinates results in [__ob__: Observer] being displayed. What am I doing wrong?
export default {
name: "Map",
data() {
return {
coordinates: [],
}
},
created() {
let self = this;
axios.get('URL').then(function (response) {
let coordinates = [];
for (let i = 0; i < response.data.length; i++) {
coordinates.push([response.data[i]["LATITUDE"], response.data[i]["LONGITUDE"]]);
}
self.coordinates = coordinates;
});
},
mounted() {
console.log(self.coordinates); // undefined
consol.log(this.coordinates); // [__ob__: Observer]
},
}