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

Posted 2023-02-23

【中文标题】在 vue 上运行语句之前如何等待异步完成？

【英文标题】：How can I wait for the async done before running a statement on vue?

【发布时间】：2020-02-11 14:09:42

【问题描述】：

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

当用户点击 show datepicker 按钮时，会同时调用 watch pickerDate 和 showDatepicker 方法

在 watch pickerDate 中运行语句之前，我想先等待 aysnc / ajax this.getDataById(id: id); 完成

我该怎么做？

我实际上只想使用pickerDate，但我无法通过pickerDate 发送ID。所以我使用手表和方法

注意：

循环中的日期选择器

我使用 vuetify

【参考方案1】：

在 date-picker 标记中删除 pickerDate 及其数据属性并改用 event

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

【讨论】：

你很棒。谢谢