ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

解决Vue中Element resetFields()重置表单不生效的问题(含Cannot read property ‘resetFields‘ of undefined问题解决)

2021-11-25 19:59:51  阅读:170  来源: 互联网

标签:Vue undefined resetFields 重置 表单 Element ref


问题背景:

在已经遵照Element官网给出的 resetFields 使用方法情况下,resetFields 方法仍无法生效

首先先来梳理一下Element官方文档中给出的 resetFields 方法的使用条件:

 

 

也就是说,想要使用 resetFields 需要满足:

  1. 给el-form-item添加 prop 属性
  2. 为了重置表单需要添加 ref 属性,ref属性需要与$ref['form']中名称一致

原始代码:

 

 按如上代码,我既添加了ref又添加了prop,如果 resetFields() 方法生效后应该会将表单中的值重置为图三所设置的初始值,但是结果并没有重置...(我emo了....)

解决方法:

于是我思来想去决定把这个监听事件换个地方绑定

我将这个监听事件绑定到了准备开始弹出弹框时的方法中:

虽然表单可以实现重置了,不过浏览器弹出了以下错误:

Cannot read property ‘resetFields‘ of undefined

 分析:

undefined 表示一个变量未定义或未赋值的初始状态值,我认为弹出这个错误大概是因为第一次点击弹框的时候弹框内本来就是初始值,并不需要 reset,所以可以在使用 resetFields 之前增加一个判断条件,代码如下:

 最后,果然不报错了!!而且重置表单也可以正常生效了!!!

所以如果有和我情况一致的uu也可以试试我这种方法噢

 

 

标签:Vue,undefined,resetFields,重置,表单,Element,ref
来源: https://blog.csdn.net/unlilalila/article/details/121544967

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有