我有一个简单的注册端点，我希望允许用户在我的 vue 应用程序中注册，我还想从我的后端向 vue 客户端显示适当的错误。
错误 JSON 结构如下所示：
{ "errors": { "Password": [ "Password is required", "Minimum length of 8 characters is required" ], "UserName": [ "Username is required", "Minimum length of 6 characters is required" ], "EmailAddress": [ "Email Address is required", "Invalid Email Address" ], "ConfirmPassword": [ "Confirm Password is required" ] } }
我有一个带有这样的寄存器函数的可组合项：
export default function useAuth() { let errors = ref({}) const register = (request) => { errors = {} AuthService.register(request) .then(res => { console.log("res: "+ res) }) .catch(err => { const errList = err.response.data.errors; errors = errList // Here i'm getting a reponse console.log(errors) }) } return { register, errors } }
我还有一个表单组件，它只是一个添加了 v-models 的简单表单：
在我的可组合项中，我可以像这样注销错误响应
错误响应
我尝试在表单组件中注销错误，但现在我只是得到一个空对象（我正在使用反应式来处理可组合项中的此错误对象）
来自可组合项的空对象响应
看起来你正在返回一个数组，而不是一个对象。
因此，要获得访问权限，您需要执行
errors[0].Password。您打算使用对象还是数组（如果您有多个错误，可能会很有用）？
如果该数组是预期的，并且您需要检查
Password属性的所有错误，您将执行如下操作：反思你的代码
其中存在多个错误，使我很难提供适合您需求的简洁答案。相反，我快速整理了一个根据您的原则工作的代码片段。展望未来，我将尽力强调需要注意的事项，并为未来提供一些好的建议。
- 使用
的响应async function()可以等待Promise不好（如果您想立即使用结果，目前
console.log证明使用async）// YOUR CODE const handleSubmit = () => { register(request); // call PROMISE () // empty object console.log(errors) };这并不能立即提供结果；它需要一些时间在单独的线程上运行。结果，JavaScript 脚本几乎立即向前移动。通常，如果您想立即使用结果，这将导致错误，因为响应尚未到达。
因此，当您尝试访问
errors的新结果时，您会看到它是空的，即使在console.log之后，1-2 秒后，它不会再为空，因为register()已经执行完毕。好的
// SUCCESSFULLY USING const handleSubmit = async () => { await register(request); // call PROMISE () AND WAIT response by await // empty object console.log(errors) };等待-等待进程结束- MDN 文档异步函数- 需要什么await使用- MDN 文档- 如何在 VueJS 上使用
ref()？1.
将
ref()、reactive()、compulated()等保存的值存储在无法修改的变量中。声明这些变量时始终使用 const。更多信息- StackOverflow 答案
不好
// YOUR CODE let errors = ref({})好的
const errors = ref({})2.
您在一个实例中使用
.value后缀，而在另一实例中则不使用。嗯，情况是ref()变量的结果始终存储在.value中。您可以相应地操纵它。不好
// YOUR CODE let errors = ref({}) // and... errors = {...}好的
const errors = ref({}) // and... errors.value = {...}如何使用
ref()？- VueJS 文档具有概述逻辑的示例代码
我对这些行进行了注释，以便更好地理解代码。我希望这是可以理解的。