Vue进阶（幺伍柒）：表单重置this.$refs[name].resetFields()；失效

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

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

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

  

 

  
1
  
2
 

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

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

  

 

  
1
  
2
 

• 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>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
 

拓展阅读

• 《Vue进阶（幺贰幺）：表单校验注意事项》

• 《Vue进阶（幺叁柒）：表单校验》

• 《Vue进阶（三十）：vue中使用element-ui进行表单验证》

• 《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/112471284