报错:Error in mounted hook Error please transfer a valid prop path to form item! el-form-item label=嵌套表单1 div v-for=groupItem groupIndex in groupData key=groupItemid
报错信息是:"Error in mounted hook: "Error: please transfer a valid prop path to form item!",意思是在mounted钩子函数中出现了错误,错误是传递了一个无效的prop路径给表单项。
根据代码,错误出现在第一个el-form-item标签中的el-form-item标签中。具体原因是在该el-form-item标签中的:prop属性的值不正确。
当前的:prop属性的值是":prop="'groupData.' + index + '.firstLine'",这个值是一个字符串,但是应该是一个合法的prop路径。合法的prop路径应该是一个对象的属性路径,例如:"groupData[index].firstLine"。
要解决这个错误,可以修改:prop属性的值为合法的prop路径:"groupData[index].firstLine"。修改后的代码如下:
<el-form-item label="嵌套表单1">
<div
v-for="(groupItem, index) in groupData"
:key="groupItem.id"
draggable="true"
class="selectItem"
>
<i
class="el-icon-error"
style="
position: absolute;
right: -5px;
top: -5px;
cursor: pointer;
"
@click="delSeletedItem(groupItem.id)"
></i>
<i class="el-icon-rank"></i>
<div class="goodsItem">
<el-form-item
label="第一行:"
:prop="`groupData[${index}].firstLine`"
:rules="firstLine"
style="margin-bottom: 20px"
>
<el-input
v-model="groupItem.firstLine"
style="width: 200px"
maxlength="6"
placeholder="最多输入6个字"
></el-input>
</el-form-item>
</div>
</div>
</el-form-item>
请注意,我还修改了v-for循环中的变量名,将groupIndex改为了index,以与:prop属性中的index一致。这是为了保持一致性,但不是导致错误的原因。
原文地址: https://www.cveoy.top/t/topic/iBZZ 著作权归作者所有。请勿转载和采集!