NuxtJs Axios rendering issue undifined

Stack Overflow Asked on January 5, 2022

When I try to access certain objects/property loaded from an axios call inside the document,

I get undefined property, even though that the master object is being rendered just fine.

Here is what I have tried:

        {{ pageContent.Cover.formats.large.url}}
    export default {
        data() {
            return {
                baseUrl: process.env.API_URL,
                pageContent: '',
        created() {
            this.$axios.$get(process.env.API_URL + '/about')
                .then(response => (this.pageContent = response))

This gives me following error:

Cannot read property ‘formats’ of undefined

This is the object:

enter image description here

One Answer

The callback response parameter often comes with multiple fields like data so you should do :

.then(response => (this.pageContent =

then in the template add a conditional rendering :

<div v-if="pageContent">
        {{ pageContent.Cover.formats.large.url}}

Answered by Boussadjra Brahim on January 5, 2022

Add your own answers!

Related Questions

NodeJS – Custom DNS lookup, fallback to ipv4

0  Asked on February 25, 2021 by giyona43


Validate input of jTextField using setter java

1  Asked on February 25, 2021 by random


How to make both bits of code run at the same time

1  Asked on February 25, 2021 by atay-hassan


SSL for pointed domains

1  Asked on February 24, 2021 by userhex


Encrypt message using RSA on ESP32

0  Asked on February 24, 2021 by daniel-tang


Counting the occurrences of a substring in a string python

2  Asked on February 24, 2021 by indrajith-ekanayake


C# calculations differ between const and variable locals?

1  Asked on February 24, 2021 by ren-van-den-berg


How do i call API with multiple parameters in android studio

3  Asked on February 23, 2021 by shane


Ask a Question

Get help from others!

© 2023 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP