如何解决element ui 表单resetFields 的indexOf报错

已于 2023-04-11 10:55:52 修改
阅读量472 收藏 3
点赞数 1
文章标签： vue.js javascript ecmascript
于 2023-03-02 15:03:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43899561/article/details/129286009
版权

在这里插入图片描述
调用resetFields情况表单的时候总是报这个错
在这里插入图片描述
点击去看看是遍历每个表单项，来清空
在这里插入图片描述
在这里插入图片描述
官方要求使用resetFields，每个表单项的prop都必填，但实际并不一定用到，于是采用这个方法，每次清除表单之前，判断一下prop内的内容
在这里插入图片描述

Frion_A
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui的表单重置方法resetFields()的坑，及简单解决。
wtyzky的博客
02-15 2285
代码示例： <!-- 新增产品dialog弹窗开始 --> <el-dialog title="添加产品信息" :visible.sync="addDialogVisible" width="40%" @close="addFormClosed" > <!-- 表单内容区 --> <el-form enctype="mu...
vue搜索和vue模糊搜索代码实例
10-17
### Element UI表单使用 在文件内容中，还介绍了如何在Vue项目中使用Element UI组件库来构建表单界面。Element UI是基于Vue 2.0的一套组件库，它提供了丰富的组件用于快速构建Web界面。 ```html ``` 使用`...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui 表单清空 resetField()方法报错Cannot read property ‘indexOf‘ of undefined
weixin_39277183的博客
07-28 3958
在使用resetField 报错Cannot read property 'indexOf' of undefined element-ui 表单清空 resetField()方法在项目应用的时候，报错具体代码如下（真实开发场景） 这样很明显报错了，应该是数据挂载顺序得问题导致。 尝试修改（失败） 然后试了我就把v-if改为了v-show，好像是可以实现关闭弹窗，但是我点击保存form表单数据的校验还是会走我隐藏掉的那一模块进行数据校验，所以果断放弃。 尝试修改（成功...
element 表单 resetFields（）方法报错Cannot read properties of undefined (reading ‘indexOf‘)
weixin_42504805的博客
11-29 813
我猜当时作者这么写应该是利用表单项的样式给文本统一占位用，所以我不想删这个表单项然后尝试给这个表单项绑定了一个空的prop发现也可以解决报错。推测是这里出的问题，那么我就把这个el-form-item给删了用了一个div替换并加上了样式结果就没有问题了。然后又跟着检查了一遍页面中的表单项发现有一个表单项只是为了显示label名称占位没有绑定prop值，如下。项目中有个详情页点进去之后页面一直在加载报了这个错，看了提示是跟element 表单清空有关。这个方法处理的，但我里没用不涉及DOM更新问题没用。
element表单方法resetFields()报错
java开发者专栏
05-10 2093
element表单方法重置报错
elemetui-vue表单校验报错“TypeError Cannot read properties of undefined (reading ‘indexOf‘)
qq_46490956的博客
09-04 444
然后百度了一下，看到了大佬的代码解释，是因为表单里面有<el-form-item>上面用了v-if所以导致两个表单切换清空校验时出现了问题；解决方法：用div包裹有v-if的<el-form-item>并且把v-if写道div上；看代码发现就是这段代码报错，通过注释排除发现就是在清空校验时报错，环境：vue2+elementui。
Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
JEECG官方博客
03-15 2617
问题： 使用this.$ref[‘form‘] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px" size="mini"> <el-form-item lab
vue+Element实现搜索关键字高亮功能
10-16
这通常通过字符串匹配函数实现，如JavaScript中的indexOf()方法。 3. 对匹配到的关键字进行高亮处理。高亮处理的实现可以通过在匹配到的文本中插入HTML标签来完成。在这个例子中，使用了标签对文本中的关键字进行...
Vue中实现回车键切换焦点的方法
11-20
const currentIndex = children.indexOf(activeElement); if (currentIndex !== children.length - 1) { nextElement = children[currentIndex + 1]; } } } if (nextElement) { nextElement.focus(); } }...
Python+Selenium实现自动化的环境搭建的步骤(图文)
12-17
EC.presence_of_element_located((By.XPATH, '//input[@id="search"]')) ) # 输入文本 element.send_keys('Python Selenium') # 提交表单 element.submit() ``` 此外，Selenium 还提供了断言功能，用于验证网页...
表单报错：Cannot read properties of undefined (reading ‘indexOf‘)....
程序媛的博客
03-09 1178
表单报错：TypeError: Cannot read properties of undefined (reading 'indexOf') at VueComponent.resetField
el-form 使用 resetField ，TypeError: Cannot read properties of undefined (reading ‘indexOf
lagego的博客
06-29 526
必须保证每个el-form-item 设置prop，不允许为空，否则汇报以上TypeError: Cannot read properties of undefined (reading 'indexOf'） 错误。
vue项目表单中使用resetFields()报错或未生效
风海洋的博客
10-07 6285
使用resetFields()报错或未生效的解决方案
在使用resetField报错Cannot read property 'indexOf' of undefined
qq_29055201的博客
04-22 4356
elementUI 的resetField是对整个表单进行重置，将甩有字段值重置为初始值并移除校验结果，当内容不一致，或者找不到内容时，就会报错，具体原因举例如下： 原因： 当表单有v-if根据表单内部数据去控制是否显示时，会存在这个问题 <el-form ref="form" :model="form" :rules="addLabelValidator"> <el-f...
vue ref和reactive区别
最新发布
灰海
08-25 253
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
element ui 表单校验没有*西安市
12-20
element-ui表单校验没有*西安市的方法。但是，根据提供的引用内容，可以看出element-ui在不同版本中的校验规则有所不同。 在element-ui版本1.X中，校验规则为： ```javascript { required: true, message: '必填', trigger: 'change|blur' } ``` 在element-ui版本2.X中，校验规则为： ```javascript { required: true, message: '必填', trigger: 'change' } ``` 根据提供的引用内容，无法确定具体的校验规则是否包含*西安市。如果你想要实现校验规则包含*西安市，你可以自定义校验规则来实现。以下是一个示例代码： ```javascript { validator: (rule, value, callback) => { if (value.indexOf('西安市') !== -1) { callback(new Error('不能包含*西安市')); } else { callback(); } }, trigger: 'change' } ``` 这个示例代码会在输入的值中检查是否包含*西安市，如果包含则会返回一个错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值