VueJS：循环获取数据以构建完整数据

Question

我已经嵌套了为学校提取数据。 生命周期看起来像 fetchSchools()->fetchfetchSchoolData(schoolId) 在渲染学校之前获取嵌套数据的最佳解决方案是什么

    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

您不能从computed property 调用异步方法，您可以使用方法或观察者来运行异步代码。

您可以使用life-cycle hooks 之一创建created 或mounted 来设置初始数据、从API 加载数据等，如下所示：

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 调用依赖于最后一次 API 调用的输出，则必须将它们相互嵌套，如 here 所述。