无法访问 Vue JS 3 中的子对象

Question

I'm pretty new in VueJS and am stuck on the following problem:

I have a template in which a click on a button loads a new template through router.push and also sends an ID as data along.

The template:

<template>
    <div>
        {{ content.description }} // Works fine
        {{ content.subobject.logo }} // Logo not found
    </div>
</template>

In the new template that is being loaded I have the following function for saving the received ID into data:

    created: function() {
        this.ID = this.$route.params.data.toString()
    },

then I have a function in methods which uses this ID to get data via axios/get :

    methods: {
        getContent: function() {
            axios.get("https://api-url.com/" + this.ID)
            .then((response) => {
                this.content = response.data.data
                console.log(response);
            }).catch(error => {
                console.log("ERRR:: ", error.response.data)
            });            
        }

    },

this function is called in mounted:

    mounted: function() {
        this.getContent()
    }

My data function:

    data: function() {
    return {
       ID: '',
       content: [] as any
    }

The data that is being returned by the API looks something like this:

title: "this is the title"
description: "Lorem Ipsum"
subobject: {
   logo: "Logo URL"
}

When i use {{ content.title }} or {{ content.description }} in my template it shows up fine. As soon as I use {{ content.subobject.logo }} I'll get an error "logo" not found.

The funny thing is, when I have the template opend up and add the {{ content.subobject.logo }} after the page has loaded, save it, and it hot-reloads, it shows up fine?!

It seems like the data is not "available" on first load - but how can that be, if {{ content.title }} works fine?

Thanks a lot for any ideas!

Answer 1

The data is initially not available which means that content is still without inner field values, in order to avoid that add a conditional rendering like :

<div v-if="content.subobject">{{ content.subobject.logo }}</div>

you could also do :

  data: function() {
    return {
       ID: '',
       content: null
    }
}

<template>
    <template v-if="content">
            <div >{{ content.subobject.logo }}</div>
            <div >{{ content.title }}</div>
    </template>

</template>