ant design表单输入后依然提示请输入

25 阅读1分钟

原因

        <a-form ref="formRef" layout="vertical" @finish="handleLogin">
          <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input placeholder="请输入用户名" v-model:value="username">
              <template #prefix>
                <user-outlined />
              </template>
            </a-input>
          </a-form-item>
        </a-form>

代码大致上是这样的。
一般来说,正常写不会出现这种bug,因为官网提供了明确的示例,只要照着做就没有问题。
我遇到这个问题是因为AI编写了代码。

问题如下:

  • a-form应当使用:model来绑定表单数据。
  • a-input的v-model:value的绑定值应当是上面表单数据中的某个属性

解决

        <a-form ref="formRef" layout="vertical" @finish="handleLogin" :model="formState">
          <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input placeholder="请输入用户名" v-model:value="formState.username">
              <template #prefix>
                <user-outlined />
              </template>
            </a-input>
          </a-form-item>
        </a-form>