Answer the question
In order to leave comments, you need to log in
How to get access to an object that is there, but the application does not see it?
There is a page with user's data, which we get through getUser.name
All data is loaded normally, but there is a nested object (user's parent), whose data we get access to: getUser.parent_user.id
vue devtools sees getUser's parent_user, data on the page this object is loaded, but an error appears in the console:
Error in render: "TypeError: can't access property "id", _vm.getUser.parent_user is undefined"
I read that this is due to asynchrony and is solved by adding v- to the block if:
v-if="getUser.parent_user" - the error disappears in the console, but the getUser.parent_user object is still not available, how to access them?
Here is the code:
<template>
<b-container>
<b-card>
<b-card-text>Email: {{ getUser.email }} disabled</b-card-text>
<b-card-text>
Mentor:
<router-link :to="{ name: 'show-user', params: { id: getUser.parent_user.id } }"
class="card-link"
>
{{ getUser.parent_user.name }} {{ getUser.parent_user.last_name }}
</router-link>
</b-card-text>
</b-card>
</b-container>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
name: 'ShowUser',
computed: {
...mapGetters(['getUser']),
},
methods: {
...mapActions(['showUser']),
},
mounted() {
this.showUser(this.$route.params.id)
}
}
</script>
import * as userService from '../../services/user_service'
export default {
state: {
user:[]
},
getters: {
getUser(state) {
return state.user
}
},
actions: {
async showUser({commit}, userId) {
const user = await userService.loadOneUser(userId)
commit('SET_USER', user.data)
}
},
mutations: {
SET_USER(state, user) {
state.user = user
}
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question