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

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

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

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

▲方案一

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

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

修改為：

▲方案二

深入地分析，為什么el.parentNode會是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個，而不是5個，這種情況下el.parentNode就是不存在的，所以產(chǎn)生了第二種解決方案，強(qiáng)制不給空數(shù)據(jù)的元素生成dom節(jié)點(diǎn)。

▲方案三

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

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

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

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

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

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