如何在Vue.js中使用v-for循环访问一个对象数组？

Question

我正在努力迭代这个对象数组。我没有看到任何控制台错误，也不确定数据为什么不显示。

{ 
"messages":[ 
    { 
    "id":1, 
    "sender":"frank", 
    "message":"Lorem ipsum...", 
    "time":1398894261, 
    "status":"read" 
    }, 
    { 
    "id":2, 
    "sender":"mary", 
    "message":"Lorem ipsum...", 
    "time":1390824261, 
    "status":"read" 
    }, 
    { 
    "id":3, 
    "sender":"john", 
    "message":"Lorem ipsum...", 
    "time":1308744200, 
    "status":"unread" 
    } 
] 
} 

我正在使用http获取请求，并且数据正在进入，但我无法遍历它。这里是我的JS：

new Vue({ 
    el: '#app', 
    data: '', 
    ready: function() { 
     // GET request 
     this.$http.get('https://www.example.com/file.json', function (data) { 
     // set data on vm 
     this.$set('data', data.messages); 
     }).error(function (data, status, request) { 
      console.log('http request error') 
     }) 
    } 
    }) 

这是我的HTML：

<div v-if="data"> 
    <li v-for="d in data">{{ d.sender }}</li> 
</div> 
<p>{{data[0].sender}}</p> <!-- this part works --> 

Answer 1

你的问题可能是由于vue.js深反应限制（检查VUE的文档） 我的建议是使用推代替。使用 this.$set循环遍历您的响应，并将结果中的一个元素逐个推送到您将在数据对象中声明的消息变量中。

data.messages.forEach((msg) => { this.messages.push(msg); }

在通过邮件可变模板循环。

Answer 2

在Ajax请求的回调，this不是虚拟机，你可以通过

1. 使用箭头功能
2. 使用var vm = this
3. 使用.bind(this)

此笔使用箭头解决这个功能：https://codepen.io/iampaul83/pen/bYpqgm

arrow function：

new Vue({ 
    el: '#app', 
    data: '', 
    ready: function() { 
     // GET request 
     this.$http.get('https://www.example.com/file.json', (data) => { 
      // set data on vm 
      this.$set('data', data.messages); 
     }).error(function (data, status, request) { 
      console.log('http request error') 
     }) 
    } 
}) 

var vm = this：

new Vue({ 
    el: '#app', 
    data: '', 
    ready: function() { 
     // GET request 
     var vm = this 
     this.$http.get('https://www.example.com/file.json', function (data) { 
      // set data on vm 
      vm.$set('data', data.messages); 
     }).error(function (data, status, request) { 
      console.log('http request error') 
     }) 
    } 
}) 

.bind(this)：

都重新定义邮件作为其创作的时刻在你的数据对象的空数组的

new Vue({ 
    el: '#app', 
    data: '', 
    ready: function() { 
     // GET request 
     this.$http.get('https://www.example.com/file.json', function (data) { 
      // set data on vm 
      this.$set('data', data.messages); 
     }.bind(this)).error(function (data, status, request) { 
      console.log('http request error') 
     }) 
    } 
})