如何在 vuetify 中显示 datepicker 之前调用 ajax？答案

【问题标题】：How can I call ajax before display datepicker in vuetify?如何在 vuetify 中显示 datepicker 之前调用 ajax？
【发布时间】：2020-02-08 15:47:45
【问题描述】：

看看这个：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

我该怎么做？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

@Max 提案并未完全回答问题。

让我们添加新的数据属性来触发日历组件的显示：

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

【讨论】：

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

这里是pen

【讨论】：