Vue-Router: Cannot read property '$route' of undefined - VueJS

Question

Please review my code.

<template>
  <div class="row flex">
    <div class="col-md-6 home_feed">
      <post-detail :posts="posts"></post-detail>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    async asyncData (params) {
      let { data } = await axios.get('http://localhost:8000/api/v1/users/' + this.$route.params.id + '/')
      return {
        posts: data
      }
    },
    components: {
      'post-detail': Item
    }
  }
</script>

I got this error: Cannot read property '$route' of undefined when I asyncdata from params.id, but when I type: console.log(this.$route.params.id), it goes right. How can I fix this

Solution 1

if you want to load data from server (from browser) in mounted lifecycle try this:

export default {
  data() {
    return {
      data: {}
    }
  },

  mounted() {
    this.asyncData();
  },

  methods: {
    async asyncData ({ route }) {
     let { data} = await axios.get('http://localhost:8000/api/v1/users/' + this.$route.params.id + '/')
     this.data = data
   }
  }
}

Response from server will be available in response variable.

For SSR you can do :

async asyncData ({ store, route }) { 
  let { data} = await axios.get('localhost:8000/api/v1/users/'; + route.params.id + '/') 
  return {
    posts: data
  }
}

asyncData will be called before the components are instantiated, and it doesn't have access to this. (see https://ssr.vuejs.org/en/data.html Logic Collocation with Components for details)

Solution 2

For SSR you can change

  <script>
    async asyncData ({ store, route }) { 
     let { data} = await axios.get('localhost:8000/api/v1/users/' + this.$route.params.id + '/') 
     return {
      posts: data
     }
    }
  </script>

to

  <script>
    async asyncData ({ route }) { 
     let { data} = await axios.get('localhost:8000/api/v1/users/' + route.params.id + '/') 
     return {
      posts: data
     }
    }
  </script>

According to the nuxt tutorial you can not have access to this inside asyncData because it is called before initiating the component. Nuxt Documentation

Comments

[samayo]

Can you do console.log(this) inside your export? I'm pretty sure you will need vue instance to access the route

[craig_h]

I'm guessing you can't access this inside asyncData. By the looks of the nuxt documentation (I've never used it) you need to pass in a context to get a route param: asyncData({params, context}) then you can access it as: context.params.id.

[KitKit]

@craig_h Can I write API in an other ways instead of asyncData to get data?

[KitKit]

Response return undefine, bro!!

[Mikhail]

in this case? in this code asyncData is placed in methods and must have this.$route

[Mikhail]

oh sorry, i changed data to response. I correct it back. try this ;)

[KitKit]

It works perfectly. Vote for your answer. Thank you very much. @Mikhail :)

[KitKit]

But is there a shorter way to do this?

[Mikhail]

Actually i was wrong, probably you are using ssr, and you can pass route as a part of an argument to asyncData. I editited answer for this case.

[KitKit]

Please check my answer next. Thank you!

[Mikhail]

try to change this.$route to route inside asyncData and tell me what happened please

[KitKit]

vue.runtime.esm.js:472 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

[Mikhail]

so, it's warning about ssr problem, not about route. Now does axios work correctly (data contains real data from server)? Do you have this project on github? can you give a link on its, for search ssr problem?

[KitKit]

Fixed: async asyncData ({ route }) { let { data } = await axios.get('localhost:8000/api/v1/users' + route.params.username + '/') return { users: data } },