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

Can you do console.log(this) inside your export? I'm pretty sure you will need vue instance to access the route — samayo
– samayo, Commented Nov 9, 2017 at 11:42
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. — craig_h
– craig_h, Commented Nov 9, 2017 at 11:52
@craig_h Can I write API in an other ways instead of asyncData to get data? — KitKit
– KitKit, Commented Nov 9, 2017 at 12:01

Mikhail · Accepted Answer · 2017-11-10 05:29:50Z

3

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)

edited Nov 10, 2017 at 5:29

answered Nov 9, 2017 at 15:29

Mikhail

965 bronze badges

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

7 Comments

KitKit Over a year ago

Response return undefine, bro!!

Mikhail Over a year ago

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

Mikhail Over a year ago

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

KitKit Over a year ago

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

KitKit Over a year ago

But is there a shorter way to do this?

|

pirmax · Accepted Answer · 2020-01-26 15:38:08Z

1

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

edited Jan 26, 2020 at 15:38

pirmax

2,14310 gold badges40 silver badges72 bronze badges

answered Nov 13, 2019 at 13:42

levis

4726 silver badges17 bronze badges

Comments

KitKit · Accepted Answer · 2017-11-10 05:08:38Z

0

@Mikhail This code is success:

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

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

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

But when get API parent-children data like this: {{data.user.username}}, data.user goes undefined. So API data goes error.

I use Nuxt and your code for SSR not work: Error: Cannot read property $route of undefined

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

answered Nov 10, 2017 at 5:08

KitKit

9,66315 gold badges65 silver badges90 bronze badges

4 Comments

Mikhail Over a year ago

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

KitKit Over a year ago

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 Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related