Мой компонент vue выглядит так:
<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>
Я использую vuetify
, когда вызывается метод searchDoctor, он вызывает ajax fetchDoctor и получает ответ. результаты будут сохранены в DataDoctor и отображены в цикле. Этот код сработал, поскольку он успешно отображал список врачей
. Моя проблема в том, что я хочу отобразить расписание каждого доктора в списке. поэтому мне нужно вызывать ajax в каждом цикле. затем отправьте его в метод getScedule, чтобы вызвать ajax getScedule и получить ответ. После этого его можно отобразить в таблице
как мне это сделать? я могу вызвать ajax на каждом цикле? если это возможно, как мне это сделать.? Я искал ссылки, но я не нашел, что