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); 
    }); 
} 

通話が終了した後filterAuthors方法が実行されるように次に、あなたのcreated関数を書く：

created: function() { 
    console.log('running'); 
    this.getData() 
    .then(() => { 
     this.filterAuthors(); 
    }); 
} 

また、計算された変数でありますarticlesと名づけられており、したがって、でアクセスできますが、this.newsFeed.articlesではなくアクセスできます。