undefined data error on page reload Nuxt.js

Question

I'm currently developing a universal app using Nuxt.js, the data on most of the pages is retrieved from an API using a fetch hook as well as vuex store. I started noticing errors on page reload/refresh and sometimes when I visit a page from the navbar. The page error is:

TypeError: Cannot read property 'data' of undefined

where data is an object retrieved from an API. I have searched around the internet for this and found it has something to do with data not being loaded or page rendering whilst the data is not fully retrieved. i have found a work around by using a v-if on my template to check if the data is set then display the contents. my question is if there is a way to achieve this, i have tried using the async/await keywords but it doesn't help and i feel like the v-if method is not the best way to handle it.

edit: solved by using $fetchState.pending when using fetch()

could you show us the error please? in the console you see usually where the error appears — Ilijanovic
– Ilijanovic, Commented Aug 19, 2020 at 7:26
I have managed to solved the error with the $fetchState.pending thank you for your time — kat N
– kat N, Commented Aug 20, 2020 at 5:50

sintj · Accepted Answer · 2020-08-19 08:09:57Z

5

If in your template you display right away the data you retrieve from the API, then indeed using the v-if is the right way to do.

If you are using the new fetch() hook, then in your template you can use $fetchState.pending to check if the loading has finished, for example:

<div v-if="$fetchState.pending"> 
 <p> Content is loading... </p>
</div>

<div v-else>
 <p> Content has loaded! {{data}}</p>
</div>

<script>
 export default{
  data(){
   return{
    data: null
   }
  }

  async fetch(){
   this.data = await getSomeAPI
  }
 }
</script>

answered Aug 19, 2020 at 8:09

sintj

8142 gold badges12 silver badges24 bronze badges

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

1 Comment

sintj Over a year ago

You're welcome, if you mark this as the right answer would be appreciated, thanks!

Collectives™ on Stack Overflow

undefined data error on page reload Nuxt.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related