VUE表单项无法重置的问题
1.问题
表单填写数据后关闭，再次打开，表单项没有重置成初始值。调用this.$refs.templateForm.resetFields()不起作用。
- 填写表单
- 关闭后再次打开
数据没有重置。
2.原因
没有设置prop属性。
3.解决方式
在<el-form-item标签中设置 prop=“index” 属性
<el-form
ref="templateForm"
:model="templateForm"
:rules="tempalteRules"
label-width="100px"
>
<el-form-item label="索引" prop="index">
<el-input v-model="templateForm.index" placeholder="请输入索引"/>
</el-form-item>
</el-form>
设置之后再调用 this.$refs.templateForm.resetFields() 即可重置。
4.总结
prop 的作用是：
- 绑定表单项到 model 中的字段，实现数据双向绑定。
- 关联表单项与 rules 中的验证规则，实现表单验证。
- 在调用 resetFields() 时，确定需要重置的表单项。