我的Vue组件如下:
<template>
...
<v-dialog
:ref="..."
v-model="..."
:return-value.sync="..."
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on" @click="showDatepicker(id)">Show datepicker</v-btn>
</template>
...
<v-date-picker v-model="..." scrollable :picker-date.sync="pickerDate">
...
</v-dialog>
...
</template>
<script>
export default {
...
watch: {
pickerDate: async function(newval) {
let a = moment(newval, "YYYY-MM").daysInMonth()
for (var i = 1; i <= a ; i++) {
...
}
},
},
methods: {
showDatepicker: async function(id) {
await this.getDataById({id:id});
}
},
};
</script>
[当用户单击显示日期选择器按钮时,它将立即调用watch pickerDate和showDatepicker方法
在watch pickerDate中运行该语句之前,我要先等待aysnc / ajax this.getDataById({id: id});
完成
我该怎么做?
我实际上只想使用pickerDate,但无法通过pickerDate发送ID。所以我用手表和方法
注意:
循环中的日期选择器
我正在使用vuetify
在日期选择器标记中,删除pickerDate及其数据属性,并使用事件来代替
<v-date-picker v-model="..." scrollable @update:picker-date="pickerUpdate($event, id)">
<script>
...
methods: {
pickerDate: async function(newval, id) {
await showDatepicker(id)
let a = moment(newval, "YYYY-MM").daysInMonth()
for (var i = 1; i <= a ; i++) {
...
}
},
},
{
showDatepicker: async function(id) {
await this.getDataById({id:id});
}
},
...
</script>