In my calendar application, I am working with an array of dates:
<div v-for="date in dates">{{ date }}</div>
I want to apply a conditional class based on the outcome of an isWeekend() method that involves making an API call:
<div v-for="date in dates" :class="[(isWeekend) ? 'weekend' : '']>{{ date }}</div>
The isWeekend() method performs an AJAX request and should return true or false. However, due to the asynchronous nature of the call, the method always returns false:
methods: {
isWeekend(date) {
let thisIsAWeekend = false
axios.get('http://myapi/' + date).then(response => {
if (...) thisIsAWeekend = true
})
return thisIsAWeekend // <-- always returns false
}
}
I have attempted using setTimeout around the return statement to allow time for the API call to complete, but the method still returns false.
How can I successfully implement a conditional class that relies on an API call?
Note: While there are other methods available such as using JavaScript's getDay() function to determine weekends, this example has been simplified to focus on the technical challenge at hand.