[Vuejs]-Undefined data error on page reload Nuxt.js

by

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>
👤sintj

Leave a comment