form怎么显示后端返回的错误?比如密码错误

[xiangnanscu]

比如登录框, 后端返回"密码错误", 我准备渲染在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>

[xiangnanscu]

有办法吗?

[daiwanxing]

你把 rule 单独拎出来用一个计算属性包裹

以下是示例代码

import { computed } from "vue"

const passwordRule = computed(() => {
      required: true,
      message:  error ? "密码错误" : "请输入密码",
 })

<a-form-item  label="密码" name="password" :rules="passwordRule">
    <a-input v-model:value="formState.password" />
</a-form-item>