Vue 2 - 如何訪問在方法內計算

Question

我想遍歷包含對象的數組，並從這些對象中獲取作者姓名列表。

要做到這一點，我想寫一個方法，我會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; 
    } 
} 
}); 

Answer 1

HTTP調用你使使用this.$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。