Vue Form 表单重置失败问题解决

一、前言

在Vue项目开发过程中，应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用tForm 表单重置失败问题解决Form 表单重置失败问题解决his.$refs[name].resetFields();重置表单注意事项。

• Form必须要有ref属性；
• Form必须绑定:model；

<Form ref="submitUser" :model="submitUser">

• Form的FormItem中必须要有prop属性;

<FormItem prop="realName">
</FormItem>

• Form包裹的元素绑定值需与FormItem中prop属性名称保持一致（可类比Form表单校验规则）

<Form ref="submitUser" :model="submitUser">
	<FormItem prop="uname">
		<Input type="text" v-model="submitUser.uname" placeholder="用户名"></Input>
	</FormItem>
	<FormItem prop="passwd">
		<Input type="text" v-model="submitUser.passwd" placeholder="密码"></Input>
	</FormItem>
	<FormItem>
		<Button type="info" @click="query">Login</Button>
		<Button @click="handleReset('submitUser')" style="margin-left: 8px;" type="info">Reset</Button>
	</FormItem>
</Form>
<script>
    export default {
    	data () {
            return {
				submitUser:{
					realName:'',
					identityNumber:'',
					mobileNumber:'',
					telePhoneNumber:''
				}
			}
        },
        methods:{
			handleReset (name) {
				this.$refs[name].resetFields();
			}
		}
    }
</script>

二、拓展阅读

• 《Vue进阶（幺贰幺）：表单校验注意事项》
• 《Vue进阶（幺叁柒）：表单校验》
• 《Vue进阶（三十）：vue中使用element-ui进行表单验证》
• 《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》