CODEWITHSUNDEEP
vue.jsaxiosfetchvuexnuxt.js
kat N
kat N

Reputation: 81

undefined data error on page reload Nuxt.js

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()

Upvotes: 0

Views: 3491

Answers (1)

sintj
sintj

Reputation: 814

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>

Upvotes: 5

Related Questions