Vue.js data: undefined

Question

I am new to Vue.js.

Please advice me.
I get comments: undefined so comments are not displaying. xhr is normal with 200.

Thank you Thank you Thank you Thank you Thank you

<template>
 <div>
  <ul class="media-list">
     <li class="media" v-for="comment in comments">
         {{ $comment.body }}            
     </li>
  </ul> 
</div>
</template>


<script>
 export default {
    data () {
        return {
            comments: []
        }
    },
    props: {
        postid: null
    },
    methods: {
        getComments () {
            this.$http.get('/blog/' + this.postid + '/comments').then((response) => {
                this.comments = response.json().data;
            });
        }
    },
    mounted () {
        this.getComments();
    }
}

Answer 1

Basically there are two problems:

1. $comment don't exist
2. You have no data on response.json().data, that's why you get a undefined

I used a different API just to test it (as I don't have access to yours).

TEMPLATE

<div id="app">
  <ul class="media-list">
    <li class="media" v-for="comment in comments">
      {{ comment.familyName + ', ' + comment.givenName }}
    </li>
  </ul>
</div>

SCRIPT

new Vue({
    el: '#app',
  data () {
    return {
      comments: []
    }
  },
  props: {
    postid: null
  },
  methods: {
    getComments () {
      this.$http.get('//ergast.com/api/f1/drivers.json').then((response) => {
        this.comments = response.body.MRData.DriverTable.Drivers;
      });
    }
  },
  mounted () {
    this.getComments();
  }
});

Check out a working example here