How does the form display the error returned by the backend? For example, the password is wrong #6307
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.3.0-beta.4
Environment
Ubuntu
Reproduction link
https://vuecomponent.github.io/issue-helper/
Steps to reproduce
比如登录框, 后端返回"密码错误", 我准备渲染在password的错误, 如何进行?
<template>
<a-form
:model="formState"
name="basic"
:label-col="{ span: 2 }"
:wrapper-col="{ span: 8 }"
autocomplete="off"
@finishFailed="onFinishFailed"
>
<a-form-item
label="用户名"
name="nickname"
:rules="[{ required: true, message: '请输入用户名' }]"
>
<a-input v-model:value="formState.nickname" />
</a-form-item>
<a-form-item
label="密码"
name="password"
:rules="[{ required: true, message: '请输入密码' }]"
>
<a-input v-model:value="formState.password" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 2, span: 8 }">
<a-button type="primary" @click="submitLogin" html-type="submit"
>登录</a-button
>
</a-form-item>
</a-form>
</template>
<script setup>
const formState = reactive({
nickname: "",
password: "",
});
const router = useRouter();
const route = useRoute();
const submitLogin = async (values) => {
const { code, user, msg, name } = await useFetch("/usr_login")
.post(formState)
.json();
if (code == 200) {
return router.push(route.query.redirect || "/");
} else if (code == 422) {
// 这里返回name = 'password', msg='密码错误', 我怎么渲染到a-form-item 密码的地方?
} else {
}
};
const onFinishFailed = (errorInfo) => {
console.log("Failed:", errorInfo);
};
</script>
What is expected?
怎么显示?
What is actually happening?
怎么显示?