Как я могу дождаться выполнения асинхронной операции перед выполнением оператора vue? - PullRequest
Новая
       61

Как я могу дождаться выполнения асинхронной операции перед выполнением оператора vue?

1 голос
/ 15 октября 2019

Мой компонент 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, но я не могу отправить ID через pickerDate. поэтому я использую часы и метод

Примечание:

DatePicker в цикле

Я использую vuetify

1 Ответ

1 голос
/ 16 октября 2019

В теге выбора даты удалите 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>
...