VueJS 处理表单组件上 api 调用的错误-PHP中文网问答

我有一个简单的注册端点，我希望允许用户在我的 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 的简单表单：

在我的可组合项中，我可以像这样注销错误响应

错误响应

我尝试在表单组件中注销错误，但现在我只是得到一个空对象（我正在使用反应式来处理可组合项中的此错误对象）

来自可组合项的空对象响应