使用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)

總結

以上是生活随笔為你收集整理的mouted vue 操作dom_vue中使用refs定位dom的坑-阿里云开发者社区的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。