forms - Vuelidate 未正确验证表单数据

Question

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

加入.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 调用从 API 获取正确的 JSON 响应，该响应显示在 Chrome DevTools 中(状态 200 OK):

/validate?field=用户名&值=测试(用户名可用)

{"status":true}

/validate?field=username&value=Admin(用户名已使用)

{"status":false}

预期结果和问题:

isUn​​ique() 应进行 API 调用，并在获得响应后返回 true 或 false 值，具体取决于是否用户名是否已被占用(res.data.status)。然后，$v 的属性应该根据要验证的表单进行相应更改。

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

此外，似乎 Axios .then Promise 无法正确解析，或者 Vuelidate 未收到解析值，因为 $pending 仍然存在验证输入字段并记录响应后设置为 true。

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

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

Answer 1

我可以通过将 async 添加到 isUn​​ique() 方法来解决此问题。