Как я могу вызвать ajax перед отображением datepicker в vuetify?

Question

Посмотрите на это: https://codepen.io/positivethinking639/pen/mddejJN

Мой сценарий vue такой:

data: () => ({
    modalTest: false,
    dateTest: null,
    time: null,
    allowedTimes: ['8:30 am','9:00am','10:30am','1:30pm','3:30 pm']
}),
methods: { 
    saveData() {
        this.$refs.dialogTest.save(this.dateTest)
    },
    allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
    setTime(time) {
        this.time = time
    }

Я хочу перед вызовом datepicker, я сначала вызываю ajax

Как можноЯ делаю это?

Answer 1

@ Макс предложение не полностью отвечает на вопрос.

Давайте добавим новое свойство данных, которое вызовет показ компонента календаря:

isAjaxCompl: false,

Переместите кнопку из шаблона, чтобы напрямуюдиалог изменения v-model:

<v-btn color="success" @click="openDialog()">call date</v-btn>

Сделайте функцию, которая будет запускаться при открытии диалога:

    openDialog() {
      this.modalTest = true;   
      axios.get('https://reqres.in/api/users?delay=1').then((response) => {
        this.isAjaxCompl = true;
      })
    },

Наконец, добавьте v-if, который будет отображать компонент календаря только тогда, когда axios получить ответ:

 <v-date-picker v-if="isAjaxCompl" v-model="dateTest" scrollable :allowed-dates="allowedDates">

Ссылка на соответствующий CodePen: https://codepen.io/RobbyFront/pen/RwwWewM

Answer 2

Необходимо переместить диалоговое окно button за пределы и добавить @click метод для отображения диалогового окна

Ваш код

<template v-slot:activator="{ on }">
     <v-btn color="success" dark v-on="on">call date</v-btn>
</template>

Новый код

HTML

<v-btn color="success" dark @click="showDate">call date</v-btn>

Код

showDate(){
    console.log("Ajax calling");
    this.modalTest = true;
}

Здесь ручка