Vue.js vuelidate: How to debounce async custom validator?
One solution is to check when the user focused out of input field (blur) and then to run the async validations.So:
<input @blur="$v.username.$touch" v-model.lazy="username" />The script:
export default { data () { return { username: '' } }, validations: { username: { required, isUnique(username) { if (username === '') return true return axios.get('/checkUsername') .then(res => { return res.data //res.data has to return true or false after checking if the username exists in DB }) } } }}Note: in order to work this code you have to import axios and required from vuelidate
Also keep in mind.The backend has to return false if the username is unique in order the above code to work correctly
I found the answer.I had to change
this.credentials.username = e.target.value;to:
this.credentials.username = e;and it works now - frequency of sending requests is now max one every 200ms