在使用element-ui进行vue项目开发过程中遇到TypeError: this.$refs.resetFields is not a function的报错，就像下面这样：

原因：在表单验证时关于重置按钮的.resetFields()方法使用过程中出错。

在找错之前先了解Form 组件提供的表单验证功能的用法

通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名

<!-- 输入框 -->
<el-form class="login_form" label-width="0px" :model="LoginForm" ref="LoginFormRef" :rules="rules">
	<!-- 输入框 -->
	<el-form-item prop="username">
   		<el-input v-model="LoginForm.username" prefix-icon="iconfont icon-user"></el-input>
 	</el-form-item>
 	<el-form-item prop="password">
   		<el-input type="password" v-model="LoginForm.password" prefix-icon="iconfont icon-mima"></el-input>
 	</el-form-item>
 	<!-- 按钮 -->
 	<el-form-item class="btns">
   		<el-button type="primary">登录</el-button>
   		<el-button type="info" @click="resetLoginForm">取消</el-button>
 	</el-form-item>
</el-form>

<script>
	export default{
		data(){
			return{
				LoginForm:{
					username:'',
					password:'',
				},
				rules:{
					username:[
						{required: true,message:'请输入用户名',trigger:'blur'},
					],
					password:[
						{required: true,message:'请输入密码',trigger:'blur'},
					],
				}
			}
		},
		methods:{
			resetLoginForm(){
				// this 是指向整个组件 那么this.$refs 就是指向当前form表单对象
				// console.log(this)
				this.$refs.LoginFormRef.resetFields();
				// 我的错误其实就是出在这里
			}
		}
	}
</script>

当我console.log(this)之后发现自己少写了.LoginFormRef这一层