Question

我是Vue.js的新手。

请告诉我。
我收到评论：未定义，因此评论未显示。 xhr是正常的200。

谢谢谢谢谢谢谢谢谢谢

<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

如果您不想绑定范围，可以试试这个。

methods: {
    getComments () {
        let vm = this;
        this.$http.get('/blog/' + this.postid + '/comments').then((response) => {
            vm.comments = response.json().data;
        });
    }
},

Answer 2

基本上有两个问题：

$comment不存在
您没有关于response.json().data的数据，这就是您获得undefined

我使用了不同的API来测试它（因为我无法访问您的）。

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();
  }
});

查看一个有效的例子here

Answer 3

this.comments = response.json().data;

console.log(this.comments) ;

看看你得到了什么; 你定义comments=Array; 也许你得到response.json().data不是数组;

Answer 4

尝试使用vm代替此。在API响应中，确保使用console.log（）获得了什么。如果响应已经在json中，请不要使用response.json（）。在HTML中将$ comment.body更改为comment.body。确保在comments []数组中有正文密钥。

<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: [],
        postid: null
      }
    },
    props: {

    },
    methods: {
      getComments () {
        let vm = this;
        vm.$http.get('/blog/' + vm.postid + 
            '/comments').then((response) => {

            console.log(response)
            vm.comments = response.data;
        });
      }
    },
    mounted () {
      let vm = this;
      vm.getComments();
    }
  }
}

Vue.js数据：未定义

4 个答案: