forms - 审核未正确验证表单数据

Question

我有一个Vue组件，其中包含安装了Vuelidate表单验证插件的表单，并且我想使用Axios进行API调用以检查数据库中是否已经使用了用户名。如果确实使用了用户名，则尚无功能显示任何内容，但Vuelidate对象$v仍应是可响应的，并根据我的Axios API调用更新其username属性。

加入

<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正常):

/ validate？field = username＆value = Test(可用的用户名)

{"status":true}

/ validate？field = username＆value = Admin(采用用户名)

{"status":false}

预期结果和问题:
isUnique()应该进行API调用，并在获得响应后，根据是否已使用用户名(res.data.status)返回 true或 false的值。然后，$ v的属性应相应更改以验证表单。

响应已正确记录在Javascript控制台中。但是，即使控制台记录 { status: true }，$ v.username始终无效($ v.username。$ invalid:true)。

另外，似乎Axios .then promise 不能正确解析，或者Vuelidate不能接收已解析的值，因为在验证输入字段并记录响应后 $pending仍设置为true。

在更改输入字段的值之前，将$ pending设置为false。

控制台或构建我的Vue应用程序时没有错误。如何让Vuelidate等待响应，然后实际使 isUnique()返回正确的 bool(boolean) 值？

Answer 1

我能够通过将async添加到isUnique()方法来解决此问题。