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拼錯了。

 

本篇筆記到此結束，再見。