Element-UI组件中Form表单resetFields()重置方法踩过的坑以及Vue中Axios同步异步请求踩过的坑，分享给大家！

最新推荐文章于 2024-08-09 09:44:02 发布

_梦想

最新推荐文章于 2024-08-09 09:44:02 发布

阅读量1.7w

点赞数 9

分类专栏： Element-UI Vue 文章标签： Vue Element-UI

本文链接：https://blog.csdn.net/Dream_xiaojin/article/details/101295923

版权

博客讲述了在Vue项目中使用Element-UI的Form表单时遇到的resetFields()重置方法问题，以及在处理数据初始化时由于Axios的异步特性导致的困扰。作者通过尝试同步请求解决这个问题，最终使用jQuery的Ajax实现同步，成功解决问题。

摘要由CSDN通过智能技术生成

关于Form表单中`restFields()`方法的官方解释

restFields()方法说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。

根据字面意思理解，调用这个方法会将表单所填写的数据重置为初始值并且移除表单校验的结果。

我最开始所理解的“初始化数据”是指的实例化Vue时在data中所声明的数据。如下图所示：

也就是说，调用restFields()会将数据充值为这里所声明的初始化数据。

在Vue中对表单初始化数据赋值，调用`created`函数

代码如下：

created: function() {
   
	axios.get("/index/oauth/getUserInfo", {
   
		params: {
   
			openId: this.openId
		}
	}).then((response) => {
   
		if (response.data.httpCode == 200) {
   
			let info = response.data.data;
			if (info.sex == 1) {
   
				info.sex = '男';
			} else if (info.sex == 0) {
   
				info.sex = '女';
			} else {
   
				info.sex = '未知';
			}
			// 将服务器返回的数据赋值给表单model
			this.ruleForm = info;
			if (info.userType == 2) {
   
				this.accountText = '学号';
				this.instituteText = '学院';
			} else {
   
				this.accountText = '工号';
				this.instituteText = '部门';