关于vue表单Element表单验证事件初次加载就触发了校验的问题

表单页面每次没有点击提交按钮就触发了，每次进入页面就有一个红色框框标满错误提示：

原因：

data数据加载以后 - dom加载好 -  ajax从后台api接口拉取数据回来，更新了data.form触发了表单校验

处理方式；

在ajax数据加载以后：（不要在mounted里面，因为执行顺序很大概率是： mounted -  （dom complete） - fetchData( ajax )  -  （dom complete） ）

你如果在mounted里面nextTick清除表单验证结果，在fetchData以后又验证了就等于前面的无效了

// 首次加载清除验证事件
console.log('ajax complete')
this.$nextTick(() => {
    // DOM 更新了
    console.log("dom update complete")
    this.$refs["ref"].clearValidate()
})
// this.$refs["ref"].clearValidate() //直接这样使用无效 - dom都没更新完毕这里移除无效

form表单的结构

<el-form ref="ref" :rules="rules" :model="form" label-position="top">

nextTick的文档：

https://cn.vuejs.org/v2/api/index.html#Vue-nextTick

 

https://juejin.cn/post/6844903557372575752

关于ticket的几个问题：

1  ticket是干嘛的，在ajax的callback里面放置 

this.$nextTick 为啥有时候会出现 

this.$refs["staffFormRef"].clearValidate() 的 undefined 呢

 

2 为啥清除表单验证事件必须在 ajax callback 里面直接在mounted不行么