如何在Vue.js中使用v-for循环访问一个对象数组?
问题描述:
我正在努力迭代这个对象数组。我没有看到任何控制台错误,也不确定数据为什么不显示。如何在Vue.js中使用v-for循环访问一个对象数组?
{
"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 -->
答
你的问题可能是由于vue.js深反应限制(检查VUE的文档) 我的建议是使用推代替。使用 this.$set
循环遍历您的响应,并将结果中的一个元素逐个推送到您将在数据对象中声明的消息变量中。
data.messages.forEach((msg) => { this.messages.push(msg); }
在通过邮件可变模板循环。
答
在Ajax请求的回调,this
不是虚拟机,你可以通过
- 使用箭头功能
- 使用
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')
})
}
})
第一。只需将data.messages分配给this.messages,并使用计算属性从数据中提取消息并在模板中遍历它,而不是$ set。 – 8bit