Vue.JS在被监视的属性中等待for循环完成。

Question

我的应用程序需要按照一定的顺序进行多个 API 调用。

allMeetings应该先执行，然后是pastMeetingsUUIDs。我想做的是确保allMeetings里面的for-loop先完成，然后castMeetingsUUIDs才会执行（以确保不会进行过多的API调用。

目前，正如我所想的那样，每次更新 pastMeetingUUIDs 时，被监视的函数 pastMeetingUUID 都会触发。我希望它只在forloop完成后触发一次。

watch: {

  allMeetings: function (){
    for (var i = 0; i <this.flatAllMeetings.length; i++){
         getPastMeetingUUIDByID(this.flatAllMeetings[i].id).then( data=> this.pastMeetingUUIDs.push(data.data))
       }
     this.allMeetingStatus = true
     }

  },

   pastMeetingUUIDs: function () {
   if(this.allMeetingStatus == true){

 //response is a mixed object array
      const entries = Object.entries(this.pastMeetingUUIDs)
      entries.forEach(element => {

        element[1].meetings.forEach(element =>{
            getPastMeetingParticipants(element.uuid).then(data=> console.log(data))
        })
      })
   }
}
 },

目前这个函数仍然会在 pastMeetingsUUID 数组中循环 n 次，我不知道为什么会这样做。

Answer 1

allMeetings: async function (){
    const meetingsUUIDs = []
    for (var i = 0; i <this.flatAllMeetings.length; i++) {
       const result = await getPastMeetingUUIDByID(this.flatAllMeetings[i].id)
       meetingsUUIDs.push(result.data)
    }
    Array.prototype.push.apply(this.pastMeetingUUIDs, meetingsUUIDs);
    this.allMeetingStatus = true
}