使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。

这篇具有很好参考价值的文章主要介绍了使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在最近使用element ui的form表单功能进行开发时，通过prop绑定时，无法正确的获取value值，一直输出为undefined，通过调查发现，
在form表单进行发开时，我们会对form绑定上model这个属性，
目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。
当你已经对该属性进行绑定后，那么接下来，你的表单的prop默认绑定的值就是model绑定的对象的值。

错误使用：


<el-form label-width="200px" ref="demo" :model="calculateData" :rules="rules">
	<el-form-item  class="input_unit percentage_100" prop="sex">
	<div class="have_unit">
		<el-input v-model="state.sex"></el-input>
	</div>
	</el-form-item>
</el-form>

数据层：
const state = reactive({
	objData:{
		name:"demo"
	},
	sex:"男"
	
	rules:[{
		objData:{
			name:[{
				........//添加验证方法
			}]
		},
		sex:[{
			........//添加验证方法
		}]
	}]
})

上面是个错误的示范，如果把要验证的数据放在了model绑定的对象外，那么就无法获得数据，验证规则内会一直得到undefined。

正确使用：


<el-form label-width="200px" ref="demo" :model="objData" :rules="rules">
	<el-form-item  class="input_unit percentage_100" prop="sex">
	<div class="have_unit">
		<el-input v-model="state.sex"></el-input>
	</div>
	</el-form-item>
</el-form>

数据层：
const state = reactive({
	objData:{
		name:"demo"
		sex:"男"
	},
	rules:[{
		objData:{
			name:[{
				........//添加验证方法
			}],
			sex:[{
				........//添加验证方法
			}]
		}
	}]
})