我正在努力迭代这个对象数组。我没有看到任何控制台错误,也不确定为什么数据没有显示。
{
"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 get请求并且数据正在进入,但我无法迭代它。这是我的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 -->
答案 0 :(得分:1)
在AJAX请求的回调中,this
不是vm,你可以通过
var vm = this
.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')
})
}
})
答案 1 :(得分:0)
您的问题可能是由于vue.js深度反应性限制造成的。(查看vue&#39; s documentation)
我的建议是使用push而不是使用
this.$set
遍历您的响应,并在您将在数据对象中声明的消息变量中逐个推送结果。
data.messages.forEach( (msg ) => {
this.messages.push( msg );
}
在模板中循环显示消息变量。