溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Vue.js中v-for運行錯誤的解決方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
Vue.js中解決v-for運行錯誤的方法：1、修改Vue框架代碼；2、強制不給空數據的元素生成dom節點；3、每個對象都有一個唯一ID的屬性，便可以使用【track-by】特性給Vue一個提示。
Vue.js中解決v-for運行錯誤的方法：
▲方案一
從報錯信息Uncaught TypeError: Cannot read property 'removeChild' of null可知，之所以發生這個問題是因為在null的對象上執行了removeChild。
修改Vue框架代碼，將這里的代碼：
修改為：
▲方案二
深入地分析，為什么el.parentNode會是null，通過上面重現的步驟發現，當that.model.test_arr = ["","4","","5","6",""]這段代碼設置發生后，v-for產生的dom節點之后3個，而不是5個，這種情況下el.parentNode就是不存在的，所以產生了第二種解決方案，強制不給空數據的元素生成dom節點。
▲方案三
問題并不算是圓滿解決，正常的情況下框架應該具有魯棒性，適應不同的使用場景，不應該出現js報錯的問題，所以還有深入研究下去的必要。
在Vue中針對v-for指令有一個track-by的可選配置：
?無track-by情況：數據修改時，無論值是否被修改，dom都被重新渲染。
?有track-by情況：數據修改時，不變數據所在的dom不被重新渲染，已改變的數據所在dom才被重新渲染。
因為 v-for 默認通過數據對象的特征來決定對已有作用域和 DOM 元素的復用程度，這可能導致重新渲染整個列表。但是，如果每個對象都有一個唯一 ID 的屬性，便可以使用 track-by 特性給 Vue 一個提示，Vue因而能盡可能地復用已有實例。所以就有了第三種解決方案。
以上是“Vue.js中v-for運行錯誤的解決方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
