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

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

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

Vue.js中解決v-for運(yùn)行錯(cuò)誤的方法：

▲方案一

從報(bào)錯(cuò)信息Uncaught TypeError: Cannot read property 'removeChild' of null可知，之所以發(fā)生這個(gè)問題是因?yàn)樵趎ull的對(duì)象上執(zhí)行了removeChild。

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

修改為：

▲方案二

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

▲方案三

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

在Vue中針對(duì)v-for指令有一個(gè)track-by的可選配置：

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

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

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

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