N
N
nikkon822020-09-03 14:41:57
Vue.js
nikkon82, 2020-09-03 14:41:57

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>


And this is from the store:
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 question

Ask a Question

731 491 924 answers to any question