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