why does async inside computed make infinity loops (vue)? - vue.js

Question

My computed of component like this :
export default {
computed: {
dataDoctorPerPage: async function () {
const start = this.pagination.page * this.pagination.rowsPerPage - this.pagination.rowsPerPage;
const end = start + this.pagination.rowsPerPage - 1;
const doctors = this.dataDoctor
const newDoctors = {}
let key = 0
for(let item in doctors) {
if(key >= start && key <= end) {
for (let i = 0; i < doctors[item].length; i++) {
const params = {
hospitalId: doctors[item][i].hospital_id,
doctorId: doctors[item][i].doctor_id,
}
await this.getDataSchedule(params) /* call async */
// console.log(this.dataSchedule)
}
newDoctors[item] = doctors[item]
}
key++
}
return newDoctors
}
}
}
If the dataDoctorPerPage called it will run the script
await this.getDataSchedule(params) will call async/api by vuex store. My problem is there. when I call await this.getDataSchedule(params), it will loop without stopping
My vuex store like this :
const actions = {
async getDataSchedule ({ commit }, payload) {
const result = await api.getDataSchedule(payload)
const items = result.data
commit('setDataSchedule', { items: items })
},
}
How can I solve this problem?
Whether there can not run async in computed?

Answer 1

Computed should not use async. If you want to do that, you need another library for it. https://alligator.io/vuejs/async-computed-properties/
But what you want to do is use an asynchronous method (in the component or store) and set the data somewhere (in the component's data or store's state), then have your computed value reference that.