如何在 vue js 中的每个循环中调用 ajax？

Posted 2023-02-23

【中文标题】如何在 vue js 中的每个循环中调用 ajax？

【英文标题】：How can I call ajax every loop in the vue js?

【发布时间】：2020-02-06 06:16:30

【问题描述】：

我的 vue 组件是这样的：

<template>
  ...
        <v-card
          max-
          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
                      
                    >
                      <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 吗？如果可以，我该怎么做。？我搜索了参考资料，但没有找到

【参考方案1】：

如果fetchSchedule 以 html 格式返回表格数据，您可能会执行以下操作：

<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 会在表格行内输出 fetchSchedule 的结果。