【问题记录】this.$refs.formMilestone.validate is not a function

最新推荐文章于 2022-11-13 16:52:56 发布
最新推荐文章于 2022-11-13 16:52:56 发布
阅读量392 收藏
点赞数
分类专栏： 问题记录 文章标签： vue bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47093559/article/details/117638814
版权
在使用Vue和iviewUI框架进行前端开发时，博主遇到了一个标题验证的bug：this.$refs.formMilestone.validate报错为不是一个函数。问题源于在循环中调用表单验证。解决方案是在引用时加上下标，正确调用方式为this.$refs.form[index].validate()。这个修复方法对于处理循环内组件的验证提供了参考。
摘要由CSDN通过智能技术生成

HI，富婆李姐记录一下工作中遇到的小bug

问题复现

vue项目用的iviewUI框架，标题验证出现标题错误:this.$refs.formMilestone.validate is not a function

问题解决

犹豫我的表单是循环出来的，所以要加上下标，改成this.$refs.form[index].validate()就可以了

虾仁不眨眼ok
关注
专栏目录
Vue.js中使用v-for生成表单时，出现“this.$refs.validate is not a function“错误的解决方法
AvskBug的博客
09-29 1838
在使用v-for生成表单时，如果遇到"this.$refs.validate is not a function"错误，可以首先检查方法名是否正确，确保与实际定义的方法名称保持一致。这个错误通常是由于在表单验证过程中，引用的方法名称拼写错误导致的。例如，如果我们使用了v-for循环生成一组表单元素，并在每个元素上绑定了验证方法，那么在验证过程中需要确保方法名称是正确的。在上面的示例代码中，我们在validateForm方法中使用if语句检查是否定义了validate方法，以避免调用未定义的方法而导致错误。
如何解决this.$refs[XXX].validate is not a function
weixin_48082725的博客
04-15 7528
相信有很多朋友对于动态生成el-form表单进行校验会出现以下情况： 其实不用慌，在动态生成的时候this.$refs.form变成了一个数组，此时的校验可以这样写： this.$refs['form'][0].validate((valid) => { if(valid) { console.log('111') } else { this.$message.warning("");
TypeError: this.$refs.form.validate is not a function
weixin_44770377的博客
03-04 1万+
TypeError: this.$refs.form.validate is not a function 解决方法一： Form组件，最好不要放到遍历里面，不然ref里的 form是谁的 都不知道，所以报错！ 或者改成 其实你这个没必要 去生成两个表单。而且一个 submit 只能提交一个表单。 ...
this.$refs[formName].validate is not a function
m0_48390697的博客
11-01 529
this.$refs[formName].validate is not a function
_this3.$refs[form].validate is not a function
木豪末的博客
09-21 6055
记录elementui中form使用的一个坑： 当使用循环渲染来同时使用多个form的时候，直接使用官方示例代码来使用form的方法会报错，正确的写法是这样 this.$refs[form][0].validate() 注意重点是后面加了数组取第1位的写法，因为此时直接用form的ref名字去寻找它的时候会发现返回了一个数组，用this.$refs[form]的写法就会出现找不到对象的情况 ...
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
例如，在弹窗打开的瞬间立即访问`this.$refs`，可能会遇到`xxx is undefined`的错误。解决这个问题的关键在于等待Vue完成DOM的更新。有以下两种常见方法： - **使用`this.$nextTick()`**：这是最常用的方法，将...
vue列表单项展开收缩功能之this.$refs的详解
10-17
在Vue.js中，`this.$refs` 是一个用于获取组件实例引用的重要特性，它允许开发者直接访问DOM元素或自定义组件实例。在这个场景中，`this.$refs` 被用来实现列表单项的展开和收缩功能。下面我们将深入探讨如何使用`...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上下文没有正确指向Vue实例。下面我们将深入探讨这个问题及其解决方案。 ### 报错场景 在开发过程中，你可能在尝试将API获取的...
解决表单校验报错‘this.$refs[formName].validate is not a function’
weixin_67898309的博客
07-06 9175
报错原因：这种情况下获得表单的方法会得到一个数组而不是对象, 直接使用 方法才会报错; 可以通过断点调试查看结果, 是数组对象 elementui 中 form 使用的一个坑: 当使用循环渲染来同时使用多个 form 的时候, 直接使用官方示例代码来使用 form 的方法会报错, 正确的写法是这样:...
this.$refs.ruleForm.validate is not a function
weixin_42482854的博客
11-20 1万+
原来是form（要验证的）不能写在循环里，不然this.$refs[name].validate((valid)这一行会一直报错
解决vue报错this.$refs[xxx].validate is not a function
柒个橙子的博客
10-27 1万+
正常情况下报错this.$refs[xxx].validate is not a function可能我们使用nextTick 延迟加载去解决，如若使用了nextTick依旧报错 当使用this.$refs[xxx].validate 的时候，如果是xxx为一个变量传进来的，如下 这种情况下，是不需要加[0]的 这种情况下必须是this. $refs[xxx][0]否则会如标题的报错 ...
Error in v-on handler: “TypeError: this.$refs.cateForm.validate is not a function
ling08140814的博客
03-08 6218
问题描述： 多个Tab页切换时，不同的form表单都需要校验，当校验时，报错了。 问题解决： 检查是否有书写错误，比如 ref=“form” 和 this.$refs.form 一定要对应。 如果书写无误，console.log(this.$refs.form)，到控制台查看其输出结果。 若输出结果如该图所示，则校验时应选择(this.$refs.form)[0].validate。 若输出结果如该图所示，则校验时应选择this.$refs.form.validate。 ...
使用react、antd组件报错TypeError: _this.formRef.current.validateFields is not a function
qq_43941925的博客
09-22 4216
先说一下我的报错场景： 从抽屉里面提取出了一个form表单作为公共组件，这就涉及到了两个组件之间的通信问题，公共组件是一个选择框，抽屉有一个提交按钮，其中需要将选择框中的数据和提交方法都传递给公共组件，使按下提交按钮之后选择框的内容也调用提交的方法存入数据库中。 报错内容： 这里我传参的时候将参数命名为了ref，系统判定ref不是一个参数，修改ref为其他命名之后就可以了。 ...
Vue-element中表单自定义校验的this.$refs[formname].validate不生效
热门推荐
HTML5_student的博客
12-20 1万+
今天遇到的问题 在做表单提交的时候，会出现this.$refs[formname].validate方法不生效，通过debug，原来是校验那里出了问题。 在表单规则制定那里我需要自定义校验，用到了validator属性，使用这个的时候要注意一个地方，就是必须要返回一个回调函数。 使用valiator校验规则时，切记一定要返回一个回调函数，使用了if，即使没有else的需求，也要写一个else返回回调函数。否则表单的validate是不会生效的 model : 绑定整个表单model值 rules : 整个表
vue 中使用$refs，报this.$refs.xxx.xxx() is not a function
m0_67393295的博客
03-03 8624
this.$refs.xDown2.showPanel() 官网上例子时这么用的，我照着搬下来，竟然报上面的错误，找了好久也看不出哪里写错了，后来请假qq群里的大佬，得以解决。 打印console.log(this.$refs.xDown2),发现控制台打印的的dom对象是个数组，使用[0],得以解决上面的问题。 如this.$refs.xDown2[0].showPanel(); ...
解决：this.$refs引用子组件报错 is not a function
草巾冒小子的博客
11-13 2万+
解决this.$refs引用子组件出现undefined或者is not a function的错误。
uniapp 组件引用 TypeError: this.$refs.xxx is not a function 解决方法（全）
u014538997的博客
08-20 2万+
因为自己的项目中，某些常用模块自己定义了组件，使用时 常出现TypeError: this.$refs.xxx is not a function （即没有xxx这个方法），结合网友和自身遇到的问题，得出三种方法
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值