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

【问题标题】：How can I wait for the async done before running a statement on vue?在 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

【问题讨论】：

标签： vue.js datepicker vue-component vuex vuetify.js

【解决方案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>

【讨论】：

你很棒。谢谢