报错信息是:"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一致。这是为了保持一致性,但不是导致错误的原因。

报错: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

原文地址: https://www.cveoy.top/t/topic/iBZZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录