我有一个 Vue 组件，其中包含一个Vuelidate安装了表单验证插件的表单，我想使用 Axios 进行 API 调用以检查数据库中是否已经使用了用户名。如果确实使用了用户名，则还没有实际显示任何内容的功能，但是 Vuelidate 对象$v仍然应该是响应式的，并username根据我的 Axios API 调用更新其属性。
加入.vue
<template>
<form id="join">
<input
name="username"
placeholder="Username"
v-model.lazy="username"
@blur="$v.username.$touch()"
type="text"
autocomplete="off"
/>
... (submit button and other irrelevant stuff) ...
</form>
</template>
<script>
import { required } from 'vuelidate/lib/validators'
import Api from '@/services/Api'
export default {
data() {
return {
username: ''
}
},
validations: {
username: {
required,
isUnique(username) {
if (username === '') return true
return Api()
.get('/validate', {
params: { field: 'username', value: username }
})
.then(res => {
console.log(res.data)
return res.data.status
})
.catch(error => {
console.error(error)
})
}
}
}
}
</script>
Axios 调用从显示在 Chrome DevTools 中的 API 获得正确的 JSON 响应（状态 200 OK）：
/validate?field=username&value=Test（用户名可用）
{"status":true}
/validate?field=username&value=Admin（使用的用户名）
{"status":false}
预期结果和问题：
isUnique()应该进行 API 调用，并在得到响应后，根据用户名是否已被使用（res.data.status）返回一个值true或一个值。false然后，$v 的属性应该相应地更改以使表单得到验证。
响应会正确记录在 Javascript 控制台中。但是，$v.username 总是无效的 ($v.username.$invalid: true)，即使控制台记录了{ status: true }.
此外，似乎 Axios.then承诺没有正确解析，或者 Vuelidate 没有收到解析的值，因为$pending在验证输入字段并记录响应后仍然设置为 true。
在更改输入字段的值之前，将 $pending 设置为 false。
控制台或构建我的 Vue 应用程序时没有错误。如何让 Vuelidate 等待响应，然后实际isUnique()返回正确的布尔值？