Vuelidate 未正确验证表单数据

Posted 2023-02-22

【中文标题】Vuelidate 未正确验证表单数据

【英文标题】：Vuelidate not validating form data correctly

【发布时间】：2019-08-16 02:47:02

【问题描述】：

我有一个 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 调用从显示在 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.status）。然后，$v 的属性应该相应地更改以使表单得到验证。

响应会正确记录在 javascript 控制台中。然而，$v.username 总是无效的（$v.username.$invalid: true），即使控制台记录了 status: true 。

此外，似乎 Axios .then 承诺没有正确解析，或者 Vuelidate 没有收到解析的值，因为在验证输入字段并记录响应后，$pending 仍然设置为 true .

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

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

【问题讨论】：

请同时显示Api()的代码

【参考方案1】：

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