element-ui form表单校验重置表单后无法输入

element-ui form表单校验重置表单踩得一个小坑

着急的话直接看文章底总结
前言，给form表单加了rules校验后，提交表单前进行字段检查

this.$refs[formName].validate( valid => {
	// validate接受两个参数，具体参考element官网api文档，第一个是boolean值
	if(valid) {
		// 为true时，说明表单校验通过，符合rules
	}else {
		// 不满足时的逻辑处理
	}
}

然后提交前检查完事

打开表单窗口时，上次的检查提示还在，因为偷懒没写form表单重置，那就加上吧

this.$refs[formName].resetFields();
// 分割线 ------------------------------------------
// 因为form表单绑定的对象值，我在data里定义时只写了一个空对象 insertData: {}

这里出现问题了，其实还是因为懒，所以开发懒不得

解决办法

所以出现了resetFields()之后，表单无法输入的问题，解决办法就是，把所有字段名在data里面定义的时候全部初始化出来,然后就解决了，自闭一秒，骂自己一秒后继续懒着，因为懒着好舒服啊，出现bug了还能学习到新的东西，所以 懒 === yyds

data() {
	return {
		insertData: {
			name1: '',
			name2: '',
			name3: '',
			name4: '',
		}
	}
}