Traversing an object after fetching it in Vue-CodePudding

I'm fetching some data like so:

Vue.createApp({
data(){
    object: {},
},
...
mounted() {
    fetch("{SERVER_URL}/someurl.php?=getObject")
                    .then((response) => response.json())
                    .then((data) => {
                        this.object = data;
    }
...
}

Then, in the html I do the following

<div>{{object.parent.child}}</div>

Which returns

Uncaught TypeError: Cannot read properties of undefined (reading 'child')

While {{translations.parent}} correctly returns the parent object.

This is what the object looks like;

{
    "parent": {
        "child": "value",
        ...
    },
    ...
}

How can I correctly retrieve the child' value?

CodePudding user response：

Before you fetch your data from server, your object doesn't have the parent attribute / key, but you are trying to access it. So, improve your code this way:

<div>{{object.parent?.child}}</div>

or this way, if you want to have more backwards compatible code:

<div>{{object.parent && object.parent.child}}</div>