el-form 使用 报错 “Error: please transfer a valid prop path to form item!“

问题描述

使用 el-form 表单,在已确认绑定数据未写错,字段名都正确,rules检验也都正确的情况下,报以下错误
在这里插入图片描述
报错后各种排查,各种查资料,都未能解决,最后发现,引起报错的原因尽很简单,却又容易忽略

问题原因

原来同一个界面上有两个 el-form表单,两个form表单除了绑定的数据名不同,其他字段格式都相同,可能是同一个界面两个相同表单冲突了

解决方法

只要在两个表单上分别给一个不同的 key值 就不会报错啦
方法如下:
表单1
在这里插入图片描述
表单2
在这里插入图片描述

这个错误是因为在动态添加表单项时,prop属性路径不正确导致的。根据提供的代码示例,错误出现在el-form-item组件的prop属性上。在prop属性中,应该使用正确的路径来绑定表单项的数据。在例子中,prop属性的值应该是 "friend[index].name" 和 "friend[index].age",而不是 "'friend.' index '.name'" 和 "'friend.' index '.age'"。这个错误可以通过将prop属性的值改为正确的路径来解决。引用中的示例代码应该修改为: <div v-for="(item, index) in form.friend" :key="index"> <el-row> <el-col :span="12"> <el-form-item label="姓名" :prop="'friend[' + index + '].name'" :rules="{required: true, message:'请输入姓名', trigger: 'blur'}"> <el-input v-model="item.name" placeholder="请输入姓名" maxlength="30" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="年龄" :prop="'friend[' + index + '].age'" :rules="{required: true, message:'请输入年龄', trigger: 'blur'}"> <el-input v-model="item.age" placeholder="请输入年龄" maxlength="30" /> </el-form-item> </el-col> </el-row> </div> 这样修改后,prop属性的路径将正确地绑定到表单项的数据上,错误就会消失。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [在表单验证的时候,遇到报错Error: please transfer a valid prop path to form item](https://blog.csdn.net/m0_53195432/article/details/121677214)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值