There is an object in my code
var user = {
name:"test",
number:"9666-0503",
details:{
test:"cannot_access_this",
second_field:"nope_no_go"
}
}
A call to a Vue JS action is being made
[TYPES.FETCH_USER]({ commit }) {
api.get('user').then(({ data }) => {
commit(TYPES.STORE_USER, data)
console.log(data)
// The returned data is correct. When accessing nested fields like
//console.log(data.details.test), I get the expected value
}, (error) => {
console.log(error)
})
},
This is followed by the mutation
[TYPES.STORE_USER](state, data) {
state.user = data
localStorage.set("user", state.user)
},
In the getters file
getUser: state => {
return state.user
}
The Component implements
computed: {
...mapGetters(["getUser"]),
},
mounted(){
this.getData()
},
methods: {
getData() {
this.$store.dispatch(TYPES.FETCH_USER);
}
}
The template shows
<h1>{{getUser.name}}</h1><!-- this works -->
<h2>{{getUser.number}}</h2><!-- this works -->
<h3>{{getUser.details.test}}</h3> <!-- THIS FAILS!!-->
Accessing getUser.details.test fails. However, when just referencing getUser.details, it displays as a string version of the details object:
<h3>{"test":"cannot_access_this","second_field":"nope_no_go"}</h3>
Why does it stringify nested objects in the template but not in console logs?