Vue.js TypeError: Message Cannot read property 'singlePost' of undefined

Question

I have blog in vue.js I want to preview each post separately. I do this>

export default{
  name: 'post',
  props:['id'],
  data(){
    return {
      singlePost: { }
    }
  },
  created() {
    BlogPostsApi.getPost(this.id)
      .then(response => {
        console.log(response)
        this.singlePost = response.data
      })
  }

in blogPosts.js i have this code>

import axios from'axios';
export default{
  getPost (id) {
    return axios.get('http://localhost:8000/api/posts/ddc/' + id)
      .then(response => {
        debugger
        return response.data
      })
  }
}

When i'm debugging i get this error Message Cannot read property 'singlePost' of undefined

Can't see anywhere in your code where you actually attempt to read singlePost. Which line of your code does the error point to? — Phil
i get this error when i'm debugging actually in created() in line this.singlePost = response.data — Emy
What exactly do you mean by "when I'm debugging"? Is the error coming from your code or from something you're typing into the console? — Phil
I have debugger in my code .then(response => { debugger return response.data }) and i go line by line — Emy

Emy Emy · Accepted Answer · 2018-06-05T22:55:42

 created() {
var self = this
    BlogPostsApi.getPost(this.id)
      .then(response => {
        console.log(response)
        self.singlePost = response.data
      })
  }

The problem is solved

Vue.js TypeError: Message Cannot read property 'singlePost' of undefined

1 Answers