Vue.js vuelidate：如何去抖异步自定义验证器？

Question

我有一个验证器来检查用户名是否已经在数据库中注册。它工作正常，除了这样一个事实，即请求是在输入每个字符的情况下发送到服务器的——这是经常发生的事情。所以我试图去抖动用户名变量值的设置，但我得到的是：

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

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

Answer 2

我找到了答案。我不得不改变

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

至：

this.credentials.username = e;

现在可以使用了 - 发送请求的频率现在最多为每 200 毫秒一个

Vue.js vuelidate：如何去抖异步自定义验证器？

Vue.js vuelidate: How to debounce async custom validator?

javascript

vue.js

lodash

vuelidate