在vue上运行语句之前如何等待异步完成?

问题描述 投票:1回答:1

我的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

vue.js datepicker vue-component vuex vuetify.js
1个回答
1
投票

在日期选择器标记中,删除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>
© www.soinside.com 2019 - 2024. All rights reserved.