VueJS：完全なデータを構築するためにループ内のデータを取得する

Question

私は学校のためにデータを入れ子に入れました。 > fetchfetchSchoolData（schoolId） 前にあなたは、computed propertyから非同期メソッドを呼び出すことはできませんあなたがメソッドまたはウォッチャーを使用することができ、学校

var app = new Vue({ 
     el: '#app', 
     data: { 
     schools : [] 
     }, 
created:function{ 
    this.fetchSchools(); 

    //next 
     this.schools = this.schools.filter(function (school) { 
      school.additionalData = this.fetchSchoolData(school); 
      return school; 
    }) 

}, 
     methods: { 
      fetchSchools: function() { 
      var url = this.buildApiUrl('/api/schools'); 
      this.$http.get(url).then(function (response) { 
       this.schools = response.data; 
      }).catch(function (error) { 
       console.log(error); 
      }); 
     }, 
     fetchSchoolData: function (school) { 
      var url = this.buildApiUrl('/api/school-detail?schoolId=' + school.id); 
      this.$http.get(url).then(function (response) { 
       return response.data; 
      }).catch(function (error) { 
       console.log(error); 
      }); 
     }, 
     }, 

    }) 

Answer 1

をレンダリングネストされたデータをフェッチするための最良の解決策は何ですか - ライフサイクルはfetchSchools（）のように見えます非同期コードを実行します。あなたは次のように、などの初期データ、APIからのデータのロードを、設定するために作成さcreatedまたはmountedようlife-cycle hooksのいずれかを使用することができます

：

var app = new Vue({ 
    el: '#app', 
    data: { 
    name: '', 
    schools: [], 
    fetchSchoolList: true, 
    schoolsListData: [] 
    }, 
    methods: { 
    fetchSchoolData: function (schoolId) { 
     var url = this.buildApiUrl('/api/school-detail?schoolId=' + schoolId); 
     this.$http.get(url).then(response => { 
      this.schoolsListData = response.data; 
     }).catch(function (error) { 
      console.log(error); 
     }); 
    }, 
    }, 
    created() { 
    this.schools = this.schools.filter(function (school) { 
     if(fetchSchoolList){ 
      this.fetchSchoolData(school.id) 
     } 
    } 
    }, 
}) 

あなたは巣のAPIを持っているが、彼らがある場合は別の他の1を呼び出します説明したように最後のAPIコールの出力に依存します。here