Is allowedDate not usable for async or ajax on the vuetify?

问题

I want to ask

methods: {
    allowedDates(date) {
        console.log(date) 
    }
},

it will console.log all date on every month selected

But if I add script ajax/async like this :

methods: {
    allowedDates(date) {
        console.log(date)
        this.getData({appDate: date}); // this is async/call ajax on the vuex store
    }
},

it's async without stopping

is allowedDate not usable for async or ajax?

docs : https://vuetifyjs.com/en/components/date-pickers#date-pickers-allowed-dates

Update

I try to testing for make sure like this

If my code like this :

methods: {
    allowedDates(date) {
        if(date=='2019-10-17')
            return true
    }
},

It works. It just enable date = 2019-10-17. besides that date, disabled

But if my code like this :

methods: {
    allowedDates(date) {
        axios.get('https://myapi.com/api/schedules')
        .then(response => {
            if(date=='2019-10-17')
                return true
        })
    }
},

It does not works, it disable all date

so if you use axios, it doesn't run the statement in the response

is this a bug in the vuetify datepicker?

Or Look at this : https://codepen.io/positivethinking639/pen/mddPjKZ?editors=1010

Should date 2019-10-17 is enabled

Because it in axios, it does not work

回答1:

You can use created hook to add your synchronous function, then trigger the allowedDates function to updated the datepicker

Find the code below:

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    date: '2019-10-15',
    availableDates: [],
    id: 5,
  }),
  methods: {
    allowedDates(a) {
      return this.availableDates.includes(a);
    },
    pickerUpdate: async function(val, id) {
      // write your async call here
       console.log('from picker update ' + val + '  id: ' + id );
      var tempDates = [];
      for(var i = 0; i < 31; i++) {
        var res = await axios.get('https://api.github.com/users/barbier')
          .then((response) => {
            // tempDates.push("2019-10-17")
          }); 
        console.log(res);
      }
      tempDates = ["2019-10-17"] // here i have hardcoded the value
      // in your case push the available dates from server response
       this.availableDates = tempDates;
      this.allowedDates();
    },
  },
})

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker
        v-model="date"
        :allowed-dates="allowedDates"
        class="mt-4"
        @update:picker-date="pickerUpdate($event, id)"
      ></v-date-picker>
    </v-row>
  </v-app>
</div>

Updated codepen:

https://codepen.io/chansv/pen/XWWdxKW?editors=1010

来源：https://stackoverflow.com/questions/58387320/is-alloweddate-not-usable-for-async-or-ajax-on-the-vuetify