我的代码是这样的:
<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