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

2
votes

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

3
vue.jsvuejs2vue-routernuxt.js
Can you do console.log(this) inside your export? I'm pretty sure you will need vue instance to access the route - samayo
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 Can I write API in an other ways instead of asyncData to get data? - KitKit

3 Answers

3
votes

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)

1
votes

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

0
votes

@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>