I am using Chartjs to create a chart that shows information present in my database, although the information is shown, I keep getting the following errors:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook (Promise/async): "TypeError: Cannot read property 'position' of undefined"
found in
---> <Reports> at src/views/Reports.vue
<VMain>
<VApp>
<Navbar> at src/layout/Navbar.vue
<App> at src/App.vue
<Root>
And this one:
TypeError: Cannot read property 'position' of undefined
at _callee$ (Reports.vue?0011:53)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:294)
at Generator.eval [as next] (runtime.js?96cf:119)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
The error points me to this function, which is where I pass the information to the chart
async created() {
const {
data
} = await axios.get("http://localhost:4000/users");
var c = 0
for (var i = 0; i < 1000; i++) {
if (data[i].position in this.labels) {
continue
} else {
this.labels.push(data[i].position)
this.confirmed.push(data[i].id)
c = c + 1
if (c == 28) {
break
}
}
}
console.log(this.labels)
}
Note: My database includes the column positions, Id and name.
If you are using created or fetch or any, then you should wrap it up in if statement as:
if(process.client){
//your code to fetch data from the server.
}
I hope it solves out your problem too.
Are you sure that const { data } = ... is correct? axios.get returns a Promise which resolves to { response: { data: {}} not { data: {} }