Can't access sub-object in 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!

@BoussadjraBrahim there isn't anything special. for testing its only <template> <div>{{ content.subobject.logo }}</div></template> — sparks
– sparks, Commented Nov 15, 2020 at 19:13

Boussadjra Brahim · Accepted Answer · 2020-11-15 19:22:22Z

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>

edited Nov 15, 2020 at 19:22

answered Nov 15, 2020 at 19:16

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sparks Over a year ago

thanks a lot, now it works!! General question: isn't it better to wrap every element around a "v-if" then, just to be sure that it has already loaded?

Boussadjra Brahim Over a year ago

@sparks since you're new in Vue world try to focus on Vue 2 then you will be familiar with it you could learn the new concepts introduces in the vue 3

Collectives™ on Stack Overflow

Can't access sub-object in Vue JS 3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related