使用element-ui的表单验证,出现"this.$refs.ruleForm.validate is not a function"
使用mint-ui的popup,在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined
以上的问题,貌似没有关联,但深究下去,都存在这个状况:在mounted钩子中使用this.$refs,而ref是定位在有v-if、v-for、v-show中的DOM节点.
为什么这种状况下,会出现问题呢? 我们仔细的了解一下vue的实例生命周期
我的理解是:
mounted阶段,DOM结构已经出来了,但是如果在DOM结构中的某个DOM节点(virtual DOM)使用了v-if、v-show或者v-for(即根据获得的后台数据来动态操作DOM,即响应式),那么这些DOM是不会再mounted阶段找到的.所以才会有undefined等错误
所以如果想要真正地在DOM加载完成后拿到数据,就需要调用VUE的全局api : this.$nextTick(() => {})
使用element的表单验证,如果是是配合v-show,v-if使用,使用自定义验证函数的形式.
如果配合v-for使用,那么请参照示例,写成形如 :prop="productGroup.${index}.num
"
详见(https://yq.aliyun.com/articles/712112/edit?spm=a2c4e.11153940.0.0.62481ce5pth2vH)