Question

我的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吗？如果可以，我该怎么办？我已经搜索过参考文献，但没有找到

Answer 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的结果。

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

1 个答案: