本文主要是介绍vue中this.$refs.queryParams.resetFields()重置表单，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
this.$refs.queryParams.resetFields(); 重置ref值为queryParams的表单，在vue中我们选中元素不在通过像Js中的DOM，而是通过ref来选中某个元素结点，这也是ref属性的基本功能之一。
1、用法不对
要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form表单中的：model 属性和el-form-item中的prop属性，才可以。
注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。
2、坑1
在还没有显示对话框之前就调用this.$refs[‘form’].resetFields()，会报错。
解决方法：
this.$nextTick(() => {this.$refs['form'].resetFields();
});
3、坑2
如果添加和修改共用一个表单时就会出现重置无效的情况。
解决方法：
this.$nextTick(() => {utils.copyFormObject(data, this.form);
});
将为表单对象赋值的操作放在对话框显示之后的一个执行周期执行。
4、为什么要放在$nextTick()中就可以了
this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据，如果修改对象的表单赋值没有放在nextTick中，就会在表单渲染时就会将这个修改对象作为初始值，所以出现无效了。使用nextTick保证表单在第一次渲染时是空值就可以了。
这篇关于vue中this.$refs.queryParams.resetFields()重置表单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
