Using Vue JS, I have been attempting to retrieve data from an API. My goal is to determine the length of the array and then log it to the console using a method.
However, every time I try to do this, the value logged is always "0" instead of the actual length of the array.
Interestingly, I am able to access the data in the HTML without any issues and display the length ({{ termine.length }}).
But my ultimate aim is to achieve this using the "logToConsole" method.
It appears that there might be an issue with accessing the data which seems to be undefined at the time of function call.
I fetch the data during the "created" hook, and output the length in the "mounted" hook, so theoretically, it should be available, right?
Does anyone have any insights as to why I am unable to access the data of the array in my "mounted" function, even after successfully fetching the data during "created"?
new Vue ({
el: "#calendar",
data: {
termine: [],
},
},
created() {
fetch("https://www.myurl.com/data/?json&function=GetEvents")
.then(response => response.json())
.then((data) => {
this.termine = data;
})
},
mounted() {
this.logToConsole();
},
methods: {
logToConsole: function () {
console.log(this.termine.length);
},
},
}