我有一个简单的注册端点，我希望允许用户在我的 vue 应用程序中注册，我还想从我的后端向 vue 客户端显示适当的错误。
错误 JSON 结构如下所示：
2
1094{
"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 的简单表单：
<script>
// Imports..
export default {
components: {},
setup() {
const { register, errors} = useAuth();
const request = {
userName: "",
emailAddress: "",
password: "",
confirmPassword: "",
};
const handleSubmit = () => {
register(request);
// empty object
console.log(errors)
};
return {
errors,
request,
handleSubmit
};
},
};
</script>
在我的可组合项中，我可以像这样注销错误响应
错误响应
我尝试在表单组件中注销错误，但现在我只是得到一个空对象（我正在使用反应式来处理可组合项中的此错误对象）
来自可组合项的空对象响应
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
看起来你正在返回一个数组，而不是一个对象。
因此，要获得访问权限，您需要执行
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 文档具有概述逻辑的示例代码
我对这些行进行了注释，以便更好地理解代码。我希望这是可以理解的。
/** ** Need more function for example ** !!! The vue is below !!! */ // CDN Vue Import const { createApp, ref, computed } = Vue // isValideEmail() (JUST EXAMPLE FOR SNIPPET) // Helper function to validate email address function isValidEmail(email) { const emailRegex = /^\S+@\S+\.\S+$/; return emailRegex.test(email); } // AuthService (JUST EXAMPLE FOR SNIPPET) class AuthServiceClass { errors constructor() { this.errors = {}; } register(inputs) { // Reset Errors this.errors = {}; console.log(inputs) // Check the UserName field if (!inputs.userName) { this.errors.UserName = (this.errors?.UserName ?? []).concat("Username is required"); } if (!inputs.userName || inputs.userName.length < 6) { this.errors.UserName = (this.errors?.UserName ?? []).concat("Minimum length of 6 characters is required"); } // Check the EmailAddress field if (!inputs.emailAddress) { this.errors.EmailAddress = (this.errors?.EmailAddress ?? []).concat("Email Address is required"); } if (!inputs.emailAddress || !isValidEmail(inputs.emailAddress)) { this.errors.EmailAddress = (this.errors?.EmailAddress ?? []).concat("Invalid Email Address"); } // Check the Password field if (!inputs.password) { this.errors.Password = (this.errors?.Password ?? []).concat("Password is required"); } if (!inputs.password || inputs.password.length < 8) { this.errors.Password = (this.errors?.Password ?? []).concat("Minimum length of 8 characters is required"); } // Check the ConfirmPassword field if (!inputs.confirmPassword) { this.errors.ConfirmPassword = (this.errors?.ConfirmPassword ?? []).concat("Confirm Password is required"); } // Return with Promise because its just a simulate your really AuthService.register return new Promise((resolve, reject) => { if (this.errors.length !== 0) { reject({ errors: this.errors }); } else { resolve({ success: true, errors: null }); } }); } } // Import AuthService (JUST EXAMPLE FOR SNIPPET) const AuthService = new AuthServiceClass() // Declare useAuth() (JUST EXAMPLE FOR SNIPPET) function useAuth() { const errors = ref({}) const register = async (request) => { await AuthService.register(request) .then(res => { console.log("AuthService Register Successfully Response", res) }) .catch(err => { console.log("AuthService Register Error Response", err) const newErrors = err.errors; errors.value = newErrors }) } return { register, errors } } /** ** !!!!!! ** Here's started vue code snippet */ // Component.vue const app = createApp({ setup() { // Get register() and errors Ref const { register, errors } = useAuth(); // Declare Ref Object for inputs const request = ref({ userName: "", emailAddress: "", password: "", confirmPassword: "", }); // Declare Submit Function (async for Promise check !!!) const handleSubmit = async () => { console.log('') // just log console.log('Detect New Handle') // just log // call register() function with our value of inputs // wait answer by "await" await register(request.value); console.log('HandleSubmit - Check Error List', errors.value) // just log }; // Just Extra Computed Value, not important // return true/false const hasError = computed(() => Object.keys(errors.value).length > 0) return { hasError, errors, request, handleSubmit } }, }).mount('#app').input { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; max-width: 200px; } .error { color: red; }<!-- Component.vue --> <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script> <div id="app"> <div> <!-- Display Errors --> <div v-if="hasError"> <!-- errors is an object, so you can foreach its keys --> <div v-for="inputName of Object.keys(errors)"> <span>{{ inputName }}:</span> <!-- name-array pairs can be directly printed as error messages --> <div v-for="errorMessage of errors[inputName]" class="error"> {{ errorMessage }} </div> </div> </div> <!-- Inputs --> <!-- request is an object, so you can foreach its keys --> <div class="input" v-for="inputName of Object.keys(request)"> <label>{{ inputName }}</label> <input v-model="request[inputName]" /> </div> <!-- Submit Button --> <button @click="handleSubmit">Submit</button> </div> </div>