Having trouble looping through this array of objects. Everything seems fine but the data is not showing up on the console.
{
"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"
}
]
}
Struggling to iterate through the data received from an http get request. The data is being fetched but not being looped. Below is the JavaScript code:
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')
})
}
})
Here is the corresponding HTML:
<div v-if="data">
<li v-for="d in data">{{ d.sender }}</li>
</div>
<p>{{data[0].sender}}</p> <!-- this part works -->