Vue.js vuelidate: Как отменить асинхронный пользовательский валидатор?

Question

У меня есть валидатор, который проверяет, зарегистрировано ли имя пользователя в базе данных. Он работал нормально, за исключением того факта, что запрос отправлялся на сервер с каждым введенным символом - что часто случается. Поэтому я попытался отменить настройку значения переменной username, но все, что я получаю, это:

Uncaught TypeError: Cannot read property 'value' of undefined 
at a.NHnr.q.methods.debounceUsername.H.a.debounce.leading

Vue скрипт:

import uniqueUsername from '../validation/uniqueUsername'
import _ from 'lodash'

export default {
    name: "signUpPage",
    data() {
      return {
        credentials: {
          username: ''
        }
      }
    },
    methods: {
      debounceUsername:
        _.debounce(function (e) {
          this.credentials.username = e.target.value;
        }, 200, {leading: false, trailing: true})
    },
    validations: {
      credentials: {
        username: {
          uniqueUsername: uniqueUsername
        }
      }
   }
}

Html:

    <b-field :label="msg('usernameLabel')"
             :class="{ 'form-group--error': $v.credentials.username.$error }">
      <b-input size="is-large" type="text" class="form__input"
               icon="account" name="username" v-on:input="debounceUsername" autofocus="">
      </b-input>
    </b-field> 
//b-field and b-input are from buefy library

Пользовательский валидатор (uniqueUsername.js):

import axios from 'axios'

export default value => {
  if (value.trim().length === 0) return true;
  let usernameUnique;
  return new Promise(async function (resolve) {
    await axios('/isUsernameUnique', {
      method: "post",
      data: value,
      headers: {'Content-type': 'text/plain'}
    }).then((response) => usernameUnique = response.data);
    if (usernameUnique) resolve('username is unique');
  });
};

Answer 1

Я нашел ответ. Я должен был изменить

this.credentials.username = e.target.value;

чтобы:

this.credentials.username = e;

и теперь это работает - частота отправки запросов теперь максимальная каждые 200 мс

Answer 2

Одним из решений является проверка, когда пользователь сфокусировался вне поля ввода (размытие), а затем запустить асинхронные проверки.

<input @blur="$v.username.$touch" v-model.lazy="username" />

Сценарий:

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
                 }) 
     }
    }
  }
}

Примечание: для работы с этим кодом вы должны импортировать axios и требовать от vuelidate

Также имейте в виду. Бэкэнд должен возвращать false, если имя пользователя уникально, чтобы вышеуказанный код работал правильно