這篇文章主要介紹Vue.js中v-for運行錯誤的解決方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供成都網(wǎng)站設計、網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)道里免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

Vue.js中解決v-for運行錯誤的方法：1、修改Vue框架代碼；2、強制不給空數(shù)據(jù)的元素生成dom節(jié)點；3、每個對象都有一個唯一ID的屬性，便可以使用【track-by】特性給Vue一個提示。

Vue.js中解決v-for運行錯誤的方法：

▲方案一

從報錯信息Uncaught TypeError: Cannot read property 'removeChild' of null可知，之所以發(fā)生這個問題是因為在null的對象上執(zhí)行了removeChild。

修改Vue框架代碼，將這里的代碼：

修改為：

▲方案二

深入地分析，為什么el.parentNode會是null，通過上面重現(xiàn)的步驟發(fā)現(xiàn)，當that.model.test_arr = ["","4","","5","6",""]這段代碼設置發(fā)生后，v-for產(chǎn)生的dom節(jié)點之后3個，而不是5個，這種情況下el.parentNode就是不存在的，所以產(chǎn)生了第二種解決方案，強制不給空數(shù)據(jù)的元素生成dom節(jié)點。

▲方案三

問題并不算是圓滿解決，正常的情況下框架應該具有魯棒性，適應不同的使用場景，不應該出現(xiàn)js報錯的問題，所以還有深入研究下去的必要。

在Vue中針對v-for指令有一個track-by的可選配置：

?無track-by情況：數(shù)據(jù)修改時，無論值是否被修改，dom都被重新渲染。

?有track-by情況：數(shù)據(jù)修改時，不變數(shù)據(jù)所在的dom不被重新渲染，已改變的數(shù)據(jù)所在dom才被重新渲染。

因為 v-for 默認通過數(shù)據(jù)對象的特征來決定對已有作用域和 DOM 元素的復用程度，這可能導致重新渲染整個列表。但是，如果每個對象都有一個唯一 ID 的屬性，便可以使用 track-by 特性給 Vue 一個提示，Vue因而能盡可能地復用已有實例。所以就有了第三種解決方案。

以上是“Vue.js中v-for運行錯誤的解決方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：Vue.js中v-for運行錯誤的解決方法
本文鏈接：http://www.chinadenli.net/article24/gpssce.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站設計公司、網(wǎng)站設計、定制網(wǎng)站、品牌網(wǎng)站制作、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)