vue에서 문을 실행하기 전에 비동기 작업이 완료될 때까지 기다리려면 어떻게 해야 합니까?

vue에서 문을 실행하기 전에 비동기 작업이 완료될 때까지 기다리려면 어떻게 해야 합니까?

내 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 picker Date와 show Datepicker 메서드가 동시에 호출됩니다.

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>

언급URL : https://stackoverflow.com/questions/58385446/how-can-i-wait-for-the-async-done-before-running-a-statement-on-vue