change v-if/v-else to v-show .

https://jsfiddle.net/s5ar1un3.

I just found out that there is such a pit. I will talk about it slowly behind the principle.

form.vue

//created
created() {
      this.$on('el.form.addField', (field) => {
        if (field) {
          this.fields.push(field);
        }
      }
      
      this.$on('el.form.removeField', (field) => {
        if (field.prop) {
          this.fields.splice(this.fields.indexOf(field), 1);
        }

      });
}

//
resetFields() {
        ...
        
        this.fields.forEach(field => {
          field.resetField();
        });
      },

form-item.vue

//mounted
    mounted() {
        if (this.prop) {
            this.dispatch('ElForm', 'el.form.addField', [this]);
            ...
            
            let initialValue = this.fieldValue;
            
            ...
            
            Object.defineProperty(this, 'initialValue', {
              value: initialValue
            });
            ...
        }
    }

//
    resetField() {

        this.validateDisabled = true;
        if (Array.isArray(value)) {
          prop.o[prop.k] = [].concat(this.initialValue);
        } else {
          prop.o[prop.k] = this.initialValue;
        }
    }

as you can see from the source code, the initial value of each field is determined in the mounted phase of form-item .

creation phase

because v-if/v-else , there is no prop when the component text is created (three item components are created, and class itself does not write prop ). Therefore, only the el.form.addField event of the form component is triggered when the item component of value is created. So the length of the saved fields is 1, and only value is saved.

selected
due to data changes, vue compares different updates, then updates the second component (this is the key) , but the goose this.initialValue is the value defined by element-ui or the original value value.

is that
resetField the value of value.initialValue is assigned to text .

< del > so resetField never use v-if/v-show unless you have confirmed that the above logic does not conflict with your business logic. < / del >
< del > Test version element-ui@2.3.3 < / del >

all of the above are the results of not looking at the document (fancy face punching). vue provides : key to prevent component reuse. ide/conditional.html" rel=" nofollow noreferrer "> Vuejs

Vue renders elements as efficiently as possible, usually reusing existing elements rather than rendering from scratch. In addition to making Vue very fast, this has some other benefits. For example, if you allow users to switch between different login methods

, this is not always in line with the actual needs, so Vue provides you with a way to express "these two elements are completely independent, do not reuse them." Just add a key attribute with a unique value:

Note that resetField is not reset , just as the validate component is not unvalidated.

if you don't follow your debug course, the problem has been solved a long time ago. If you don't have much to say, go to the code:

    <template>
    <div>
        <el-button @click="onSelect"></el-button>

        <el-dialog
                title=""
                :visible.sync="dialogVisible"
                width="50%">
            <el-form
                    ref="formData"
                    :model="formData"
                    :rules="formRules">
                <el-form-item label="">
                    <el-select v-model="formData.Type">
                        <el-option label="1" value="class1"></el-option>
                        <el-option label="2" value="class2"></el-option>
                    </el-select>
                </el-form-item>
                <div v-if="formData.Type=='class1'">
                    <el-form-item label="class1" prop="desc">
                        <el-input type="textarea" v-model="formData.desc"></el-input>
                    </el-form-item>
                </div>
                <div v-else>
                    <el-form-item label="2" prop="region">
                        <el-select v-model="formData.region" multiple>
                            <el-option label="sdf" value="11"></el-option>
                            <el-option label="dsaf" value="22"></el-option>
                            <el-option label="dyrt" value="33"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('formData')">ok</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                dialogVisible: false,
                formData: {
                    Type: 'class1',
                    desc: '',
                    region: []
                },
                formRules: {
                    desc: [
                        {
                            required:true,
                            validator(rule, value, callback){
                                var Reg = /[\w+\/]*\w+/;
                                if(value==''){
                                    callback(new Error(''))
                                }else if(!value.match(Reg) || value.match(Reg)!=value){
                                    callback(new Error('/'));
                                }else{
                                    callback();
                                }
                            }
                        }
                    ],
                    region: [
                        { required:true, message:'', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false;
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            onSelect(){
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.$refs.formData.resetFields();
                    console.log(this.Type)
                });
                console.log(this.formData)
            }
        }
    }
</script>

your problem is v-if/v-else here, because your initial Type is'', VMI if = "formData.Type=='class1'", that's why you're showing textarea. But the second time you click, after you execute resetFields, Type is displayed as select for undefined, and the type of desc will change to be the same as region because of the reset, which explains why you choose type 2 for the first time and click in the second time and will not report an error.