在使用resetField 報錯Cannot read property 'indexOf' of undefined

elementUI  的resetField  是對對整個表單進行重置，將所有字段值重置為初始值並移除校驗結果 ，當內容不一致 或找不到內容時 就會報錯，具體原因舉例如下：

原因1：ruleForm 內部數據 與實際頁面需要驗證的數據不一致 比如：下面例子 頁面需要的是name ，而 ruleForm定義的是name2，當單詞不小心寫錯就會報這個問題

 <el-form
        ref="newFormModel"
        :rules="rules"
        :model="ruleForm"
        :inline="true"
        style="width: calc(100%-50px); margin-left:50px;"
        min-width="1158px"
        class="demo-ruleForm"
      >
        <el-form-item label="Name" prop="name" class="my-el-form-item">
          <el-input v-model="newObj.name" placeholder="">
          </el-input>
        </el-form-item>
        <br>
        <el-form-item label="Country" prop="country" class="my-el-form-item">
          <el-input v-model="newObj.country" placeholder=""> 
          </el-input>
        </el-form-item>
</el-form>

script
 ruleForm: {
     name2: '',
     country: ''
 }, 

原因二：當表單有v-if 根據表單內部數據去控制是否顯示時 會存在這個問題 

網上的部分解決方案：

   1 使用 v-show 代替 v-if

   2 使用 clearValidate  移除表單項的校驗結果。對有驗證的字段進行清空驗證error 內容，對不需要驗證的字段進行手動的初始化；

                   或者使用以上兩種方式結合 ，看自己項目的需要

驗證 兩種方法 並沒有徹底解決這個問題 ：

Vue 實現響應式並不是數據發生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM 就不會存在上面的報錯問題

        this.$nextTick(() => {
             this.$refs.form.clearValidate()
        })