關於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不行么