检查未正确验证表单数据

Question

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

Join.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调用，并在获得响应后，根据用户名是否已被使用而返回true或false的值（res.data 。状态）。然后，$ v的属性应相应更改以验证表单。

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

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

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

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

Answer 1

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