我想遍历包含对象的数组,并从这些对象中获取作者姓名列表。
要做到这一点,我想写一个方法,我将forEach()
通过。但是当我console.log(articles)
或console.log(this.newsFeed)
返回undefined
或者只是空白时,我似乎无法访问包含该数组的计算属性。
显然,我做错了什么,但我不明白是什么......
这是我的代码:
new Vue({
el: '#feed',
data: {
newsFeed: "",
},
created: function() {
console.log('running');
this.getData();
this.filterAuthors();
},
computed:
{
articles: function() {
var articles = this.newsFeed.articles;
return articles;
},
},
methods:
{
getData: function() {
var newsFeed = this.$http.get('https://newsapi.org/v1/articles?source=the-next-web&sortby=latest&apikey='+ apikey).then(response => {
this.newsFeed = response.body;
}, response => {
console.error(error);
});
},
filterAuthors: function() {
var articles = this.newsFeed.articles;
var authorsArray = [];
console.log(articles);
// commented out while troubleshooting above
// articles.forEach(function(article) {
// // var authors = article.author;
// // authorsArray.push(authors);
// console.log(authors);
// });
// return authorsArray;
}
}
});
答案 0 :(得分:4)
使用this.$http
进行的HTTP调用是异步的。由于它是异步的,您需要告诉您的代码等待调用完成。
在getData
函数中,您可以写:
getData: function() {
return this.$http.get('https://newsapi.org/v1/articles?source=the-next-web&sortby=latest&apikey='+ apikey)
.then(response => {
this.newsFeed = response.body;
}, err => {
console.error(err);
});
}
然后编写created
函数,以便在调用完成后执行filterAuthors
方法:
created: function() {
console.log('running');
this.getData()
.then(() => {
this.filterAuthors();
});
}
此外,计算变量名为articles
,因此可以通过this.articles
访问,而不是this.newsFeed.articles
。