問題描述:
在使用vue的時候,我們因為改變了頁面的DOM結構,可能會遇見這樣的告警信息,並且頁面會被卡主,需要刷新才可以解決;但是,在實際項目中,這樣的情況肯定是不允許出現的。錯誤告警如下:
"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before……
問題分析:
vue框架中提供了v-if 和 v-show兩個指令,用於控制頁面不DOM結構的顯隱性。
相同點:均可以實現局部DOM的顯示和隱藏
不同點:顯示和隱藏的原理不同。v-show隱藏元素的本質是給元素本省添加了display = none這個css屬性,其實DOM結構仍存在於頁面,可以通過F12查看DOM結構。v-if隱藏元素的本質是不加載DOM結構,不能通過F12查看DOM結構之后再v-if綁定的布爾變量為true時,才添加對應的DOM結構。
問題解決:
簡單來講,使用v-show代替v-if即可。