element-ui动态删除表单项后导致表单验证报错"please transfer a valid prop path to form item!"

文档：https://element.eleme.io/2.12/#/dong-tai-zeng-jian-biao-dan-xiang

我们有个数组如下:

 channelForm: [
        [{
          name: "10",
          uname: "002",
          imgBase64: "005",
          id: "1010",
          imgId: "1010"
        }]]

这些name，uname是和element的input表单绑定再一次的，他们可能是必填，可能还是手机号。。。

文档已经给了非常详细的说明，但是还是不可避免的遇到一个坑

copy下官网代码:

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>

请注意：

1.它的el-form里面写了model，校验是根据el-form-item标签上的prop和form里面的model进行匹配的

2.他的数据是一个object，可是有时候我们需要跟纯粹的Array数据，而不是和官网demo代码这样的：

官网代码:

<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },

它这里要用的是domains这个数组的数据，但是它外层加了个dynamicValidateForm，按照我们的习惯思维并不想要这个，而且个人觉得这会对开发者产生干扰（如果你没有，那当我没说）

针对这个问题，我们用vue的computed来实现，例如:

computed:{
    dynamicValidateForm(){
        return {
            dynamicValidateForm:this.domains
        }
    }
}

data(){
    return {
        domains:[{...}]
    }
}

回到标题，"please transfer a valid prop path to form item!"产生的原因：

我们通过点击包错的哪一行代码找到包错的代码位置，断点，截图如下

我们可以看到当前交易的是validBankModel这个字段，而n就是我们modal里面的所有字段，很明显再我们的modal里面找不到，

所以它报错了，

原因在于我们的modal传错了或者这个props拼错了。

 

本篇笔记到此结束，再见。