5

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

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');
  });
};
4

2 回答 2

5

一种解决方案是检查用户何时专注于输入字段（模糊），然后运行异步验证。所以：

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

注意：为了使用此代码，您必须从 vuelidate 导入 axios 和必需

还要记住。如果用户名是唯一的，则后端必须返回 false 才能使上述代码正常工作

于 2018-03-08T21:55:14.213 回答
2

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

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

至：

this.credentials.username = e;

它现在可以工作了 - 发送请求的频率现在最多每 200 毫秒一次

于 2018-03-09T16:58:15.260 回答