VueJS 處理表單元件上 api 呼叫的錯誤
我有一個簡單的註冊端點，我希望允許用戶在我的 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 的簡單表單：
<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>
在我的可組合項目中，我可以像這樣註銷錯誤回應
錯誤回應
我嘗試在表單元件中登出錯誤，但現在我只是得到一個空物件（我正在使用反應式來處理可組合項中的此錯誤物件）
來自可組合項目的空物件回應
