Melodia
4 months ago
243
2
Vue

I get an error when I try to access a property of a nested object

Posted 4 months ago by Melodia

My request in the vue side looks like this:

axios.get('/api/project/' + this.$route.params.id)
.then(res => {
    this.project = res.data
})
.catch( err => console.log(err))

If I console.log "this.project" I get the project with its related owner details, like so:

project: {
    id: 1
    name:
    owner: {
        name: 'my name comes here'
    }
}

In the template, I want to display the owner, as well as the the name of the project and I do it like this:

 <p>{{ project.owner.name }} | {{ project.name }}</p>

The owner name shows, however, I notice the following error/warning in the console:

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

If I remove the "project.owner.name", the error disappears.

Why does it show the owner name but it says undefined at the same time? The same is happening for all other properties that are nested inside other objects.

Please sign in or create an account to participate in this conversation.