在使用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=" 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()
        })

在使用resetField 报错Cannot read property 'indexOf' of undefined

相关推荐