How can I call ajax every loop in the vue js? - vue.js

Question

My vue component like this :
<template>
...
<v-card
max-width="1200"
class="mx-auto"
>
<v-container
class="pa-2"
fluid
>
<v-row>
<v-col
v-for="(item, i) in dataDoctor"
:key="i"
>
<v-card
>
<v-list-item three-line>
<v-list-item-avatar
size="125"
tile
>
<v-img :src="'https://via.placeholder.com/100x100'"></v-img>
</v-list-item-avatar>
<v-list-item-content class="align-self-start" :style="{'text-align':'left'}">
<v-list-item-title
class="headline mb-2"
v-text="item.docterName"
></v-list-item-title>
<v-list-item-subtitle v-text="item.specialistName"></v-list-item-subtitle>
<v-list-item-subtitle v-text="item.hospitaName"></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-app-bar dark color="grey">
<v-toolbar-title>Weekly Schedule : {{item.hospitalName}}</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="390px"
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on">Call datepicker</v-btn>
</template>
<v-date-picker v-model="date" scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
</v-dialog>
</v-app-bar>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Sun</th>
<th class="text-left">Mon </th>
<th class="text-left">Tue</th>
<th class="text-left">Wed </th>
<th class="text-left">Thu</th>
<th class="text-left">Fri </th>
<th class="text-left">Sat </th>
</tr>
</thead>
<tbody>
<tr>
<!-- response of ajax fetchSchedule is displayed here -->
</tr>
</tbody>
</template>
</v-simple-table>
...
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
...
</template>
<script>
...
export default {
data: () => ({
...,
date: new Date().toISOString().substr(0, 10),
modal: false,
}),
computed: {
...mapGetters(["dataDoctor","dataSchedule"])
},
methods: {
...mapActions([
"fetchDoctor",
"fetchSchedule"
]),
searchDoctor() {
...
this.fetchDoctor(params);
},
getScedule(doctorId) {
this.fetchSchedule(doctorId)
}
},
};
</script>
I make it using vuetify
when the searchDoctor method is called, it will call ajax fetchDoctor and get a response. the results will be stored in DataDoctor and displayed in a loop. This code has worked because it successfully displayed a list of doctors
my problem is I want to display the schedule of each doctor on the list. so I need to call ajax on each loop. then send it to the getScedule method to call the ajax getScedule and get a response. After that it can be displayed in the table
how do i do it? can i call ajax on each loop? if it can, how do I do that.? I have searched for references, but I did not find that

Answer 1

If fetchSchedule returns table data in html, you can likely do something like this:
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Sun</th>
<th class="text-left">Mon </th>
<th class="text-left">Tue</th>
<th class="text-left">Wed </th>
<th class="text-left">Thu</th>
<th class="text-left">Fri </th>
<th class="text-left">Sat </th>
</tr>
</thead>
<tbody>
<tr v-html="fetchSchedule(item.doctorId)"></tr>
</tbody>
</template>
</v-simple-table>
v-html will output the result of fetchSchedule inside the table row.