如何在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') 
     }) 
    } 
})