如何解决vue上的[object Promise]?

时间:2019-12-07 06:42:26

标签: vue.js asynchronous vue-component vuex vuetify.js

我的代码是这样的:

<v-row dense>
    <v-col
        v-for="(item, i) in items"
        :key="i"
        cols="12"
        >
        <v-card
            dark
        >
            <div class="d-flex flex-no-wrap justify-space-between">
            <div>
                <v-card-title
                class="headline"
                v-text="item.doctor"
                ></v-card-title>

                <v-card-subtitle v-text="item.hospital"></v-card-subtitle>
                <v-card-subtitle>{{available(item.doctorId, item.hospitalId)}}</v-card-subtitle>
            </div>

            <v-avatar
                class="ma-3"
                size="125"
                tile
            >
                <v-img :src="item.src"></v-img>
            </v-avatar>
            </div>
        </v-card>
    </v-col>
</v-row>

  methods: {
    // available (doctorId, hospitalId) {
    available: async function (doctorId, hospitalId) {
      let fromDate = moment()
      let toDate = moment().add(2, 'days')

      while (fromDate <= toDate) {

        const payload = {
          hospitalId: hospitalId,
          doctorId: doctorId,
          date: fromDate.format('YYYY-MM-DD')
        }

        // this is async/ajax to call api by vuex store
        // await this.checkAvailibility(payload)

        // if (this.availibility.items.length > 0) {
          if(fromDate.diff(moment(), 'days') == 0) {
            return `<v-icon class="mr-2" color="success">check_circle</v-icon>Available Today`
          }
          else if(fromDate.diff(moment(), 'days') == 1)
            return `<v-icon>check_circle</v-icon>Available Tomorrow`
          else
            return `<v-icon>check_circle</v-icon>Available ${fromDate}`
        // } 

        fromDate = fromDate.add(1, 'days')
      }
    },
  },

演示和完整的代码如下:

https://codepen.io/trendingnews/pen/vYENWqR?editors=1010

由于我使用async,因此可能会发生此错误。但是我需要。因为我想通过vuex store调用ajax

如何在不删除异步的情况下解决此问题?

注意:

this.availibility.items.length用于检查某天是否有医生。如果大于0表示可以使用

我评论说,因为它叫vuex store

0 个答案:

没有答案