ElementUI el-form TypeError: form.validate is not a function

遇到这个问题2次,以下是解决方法:

  1. vue里的ref忘记写 ,这是低级错误。补上就是。
    2.<el-form>在v-for的嵌套里, 这种情况是这样的,
    拿我的例子来说,我的页面用v-for 渲染了2个form, ref分别是form-0, form-1.
    当调试的时候我发现,当前页面的$refs里有2个,而且每个form 都是一个Array(1)的数组,这时候,数组当然没有validate方法,因此报错,
image.png

此时的解决办法就直接取数组的第一个出来,便是Form了:
typescript下,我试了将泛型改成Array并不成功,后来改成any.


image.png

root cause 分析 https://cn.vuejs.org/v2/api/#ref, 官方并不建议ref用数据绑定的模式自动生成,虽然有时我们不得不这么做:

image.png

推荐阅读更多精彩内容

  • code inline[https://codepen.io/obligat/pen/jOrbXjb] 配置字段:...
    McDu阅读 309评论 0 0
  • 封装表单子控件 表单控件需要很多子控件,所以要先封装一下子控件,然后才方便封装表单控件。 定义接口,统一规范 表单...
    联旺阅读 442评论 0 0
  • ### 什么是Vue.js + Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(Reac...
    JLong阅读 591评论 0 0
  • 1. vue-cli 构建项目 官网地址[https://cn.vuejs.org/v2/guide/insta...
    sunxiaochuan阅读 16,041评论 6 103
  • 生命周期函数面试题 1.什么是Vue生命周期?vue生命周期是指vue是对象从创建到销毁的过程。 2.Vue生命周...
    Angel_6c4e阅读 15,752评论 2 51
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 7,610评论 28 53
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 5,761评论 4 8
  • 步骤:发微博01-导航栏内容 -> 发微博02-自定义TextView -> 发微博03-完善TextView和...
    dibadalu阅读 2,687评论 1 3
  • 回这一趟老家,心里多了两个疙瘩。第一是堂姐现在谈了一个有妇之夫,在她的语言中感觉,她不打算跟他有太长远的计划,这让...
    安九阅读 3,130评论 2 4