I'm working with VueJs / Vuex using Laravel in the backend. I'm getting undefined error message each time in my console.
This is my state.js
var state = {
data: {
record:{
data:{}
}
}
}
export default state;
This is my component :
computed: {
...mapState({
data: (state) => state.data,
}),
record: function(){
return this.data.record.data.profile[0];
}
},
How I try to display data :
<h4>{{record.name}}</h4>
This is my Vuex from (Vuex DevTools)
{
"record":{
"data":{
"profile":[
{
"id":6,
"name":"bret.prohaska",
"email":"delta00@example.org"
}
]
}
}
}
profile is undefined before data is loaded, which will throw undefined error if you try to index it. You need to take care of the edge case in your logic:
record: function(){
let profile = this.data.record.data.profile
return profile ? profile[0] : {};
}