问题
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