Can read property ‘indexof’ of undefined

The resetfield of elementui resets the whole form, resets all field values to the initial values and removes the verification results. When the contents are inconsistent or cannot be found, an error will be reported. The specific reasons are as follows:

reason 1: the internal data of ruleform is inconsistent with the data to be verified on the actual page. For example, in the following example, the page needs name, while the definition of ruleform is Name2. This problem will be reported when the words are written incorrectly

<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: ''
 },

reason 2: this problem exists when the form has V-IF to control whether it is displayed or not according to the internal data of the form

Some solutions on the Internet:

1 use v-show instead of V-IF

2 use clearvalidate to remove the validation result of the form item. Clear the verification error content for the fields with verification, and manually initialize the fields without verification

Or use the above two ways to see the needs of your project

Verification of the two methods does not completely solve this problem

Vue does not change the DOM immediately after the data changes, but updates the DOM according to a certain strategy. If you use $nexttick after modifying the data, you can get the updated DOM in the callback, and the above error reporting problem will not exist if you use $nexttick after modifying the data

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

　　

Similar Posts: