(一)iview的校验TypeError: Cannot read property 'validateField' of undefined"

栏目: IT技术 · 发布时间: 4年前

内容简介:我是在自己封装了一个地址级联选择,然后想要每次改变了其中数据的时候,就进行一次单独校验,所以用到了iview对部分表单字段进行校验的方法validateField。其实一开始使用的时候是没有任何问题的,问题出现的原因是我有多个表单,每次只显示一个表单,可以来回切换,如下图。我使用的是v-if来控制表单2和表单3的显示与隐藏,在我填完信息2以后进入到信息3,然后再点击回去信息2的时候,便报错了:我就很奇怪为什么我一开始的校验是好的,返回来此表单就会出错呢,这对单个表单校验出错也太坑了吧。然后我打印了this.

一、问题描述

我是在自己封装了一个地址级联选择,然后想要每次改变了其中数据的时候,就进行一次单独校验,所以用到了iview对部分表单字段进行校验的方法validateField。其实一开始使用的时候是没有任何问题的,问题出现的原因是我有多个表单,每次只显示一个表单,可以来回切换,如下图。我使用的是v-if来控制表单2和表单3的显示与隐藏,在我填完信息2以后进入到信息3,然后再点击回去信息2的时候,便报错了: TypeError: Cannot read property 'validateField' of undefined"

(一)iview的校验TypeError: Cannot read property 'validateField' of undefined

二、问题关键

我就很奇怪为什么我一开始的校验是好的,返回来此表单就会出错呢,这对单个表单校验出错也太坑了吧。然后我打印了this.$refs.['formTwo']发现打印的是undefined,也就是说根本就不是表单校验出了问题,而是在于压根就找不到这个DOM对象。

关键点在于,Vue 在更新 DOM 时是 异步 执行的,而我我使用了v-if来控制所有表单内容的显隐,而v-if它通过动态的摧毁DOM又构建,来控制元素的显隐。在我重新切回表单2的时候,原来的DOM早已被摧毁,此时又还未创建完成。

三、解决办法

1、我想到的第一个办法是使用v-show;v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过控制DOM元素的display样式来到达显隐,之前在写富文本编辑切换的时候也出现什么东西undefined,错误同样的原因也是我使用了v-if来控制每一个富文本编辑,后来改为v-show之后,解决了问题。

而在这个地方,这样改随之而来的另一个问题是我所有的表单在一开始的时候都出现了,我知道这肯定是和我的判断条件写的不对有关,可我又不想改,于是有了第二个解决方法。

2、使用nextTick。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数将在 DOM 更新完成后被调用。于是我将该句单独校验表单的代码写在了里面,问题解决~   如下:

this.$nextTick(() => {
  this.$refs.['formTwo'].validateField('street')
});

四、相关知识点

v-if和v-show的区别(使用v-if的时候一定要好好考虑清楚!)

vue异步加载dom(参考: https://cn.vuejs.org/v2/guide/reactivity.html

如何单独校验某一表单项


以上所述就是小编给大家介绍的《(一)iview的校验TypeError: Cannot read property 'validateField' of undefined"》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS3 Solutions

CSS3 Solutions

Marco Casario / Apress / 2012-8-13 / GBP 35.50

CSS3 brings a mass of changes, additions, and improvements to CSS across a range of new modules. Web designers and developers now have a whole host of new techniques up their sleeves, from working wit......一起来看看 《CSS3 Solutions》 这本书的介绍吧!

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具