原因
<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>