VueJS: TypeError: Cannot read property of undefined when Reload

Question

I have a page like this:

<template>
  <div class="row flex">
    {{posts.id}}
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    async asyncData ({ route }) {
      let { data } = await axios.get('http://localhost:8000/api/v1/feeds/' + route.params.id + '/')
      return {
        posts: data
      }
    }
  }
</script>

When I click link with hot reload (router-link), it display well. But when I reload this window, it appear in 1 seconds and disappear then.

Video: http://g.recordit.co/ht0a0K2X81.gif

Error Log:

How can I fix this?

webnoob · Accepted Answer · 2017-11-15 11:03:12Z

8

Add a property to your data i.e dataLoaded: false. When your ajax request has finished, set this.dataLoaded = true. On your template add v-if="dataLoaded. This will mean the template data won't render until you're ready.

You could also do v-if="posts" as another way but I generally have a consistent dataLoaded prop available to do this.

Edit: I just looked at your example again and doing something like this would work:

<template>
  <div class="row flex" v-if="posts">
    {{posts.id}}
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data () {
        return {
            posts: null
        }
    }
    methods:{ 
        loadPosts () {
            return axios.get('http://localhost:8000/api/v1/feeds/' + this.$route.params.id + '/')
        }
    },
    created () {
        this.loadPosts().then(({data}) => {
            this.posts = data
        })
    }
  }
</script>

I've removed the async and just setting posts when the axios request returns it's promise. Then on the template, it's only showing posts is valid.

Edit

You can also use your original code and just add v-if="posts" to the div you have in your template.

edited Nov 15, 2017 at 11:03

answered Nov 15, 2017 at 9:45

webnoob

16k13 gold badges87 silver badges169 bronze badges

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

15 Comments

webnoob Over a year ago

See my edit, I've changed route.params.id to this.$route.params.id within the axios request.

KitKit Over a year ago

This work: Change in create(): this.loadPosts().then((data) into this.loadPosts().then(({data}). It works.

webnoob Over a year ago

Ah, good. Wasn't sure of the data structure but it was here for an example :) Glad it's working.

KitKit Over a year ago

But do you have any better solution?

webnoob Over a year ago

Not really, you only want to show the page when the data is loaded so this is the best approach. It's better than await as well because it means there's no blocking happening. I've used this method with great success over my app.

|

Collectives™ on Stack Overflow

VueJS: TypeError: Cannot read property of undefined when Reload

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related