Vue 2 - 如何在方法中访问计算

时间:2017-07-31 22:49:21

标签: vue.js vuejs2

我想遍历包含对象的数组,并从这些对象中获取作者姓名列表。

要做到这一点,我想写一个方法,我将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;
    }
}
});

1 个答案:

答案 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