[Vuejs]-VueJS: fetch data in loop to build full data

by

0👍

You can not call a async method from a computed property, you can use method or watcher to run asynchronous code.

You can use one of the life-cycle hooks like created created or mounted for setting initial data, loading data from API, etc, like following:

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

You have to nest API calls one another other if they are dependent on output of last API call, as explained here.

Leave a comment