完美解決vue中報錯?“TypeError:?Cannot?read?properties?of?null?(reading'forEach')“
完美解決vue中報錯 “TypeError: Cannot read properties of null (reading ‘forEach‘)“
報錯截圖：
報錯原因：
上圖的報錯翻譯過來其實就是無法讀取 null 的屬性。簡單來說就是循環(huán)遍歷的數(shù)組是 null 值，而一旦循環(huán)遍歷的數(shù)組為 null 值的同時再使用 forEach 方法遍歷數(shù)組就會出現(xiàn)此報錯。
解決方案：
知道報錯的原因，那么問題也就能迎刃而解了，由于之前是因為 null 值的問題才導(dǎo)致循環(huán)遍歷報錯，那么我們完全可以在進入循環(huán)遍歷之前將要循環(huán)遍歷的數(shù)組做一個非空判斷，如下代碼：
未修改代碼：
res.data.forEach((item) => {
// 執(zhí)行操作
});加上非空判斷后：
// 循環(huán)遍歷之前加上非空判斷
if (res.data) {
res.data.forEach((item) => {
// 執(zhí)行操作
});
}補充：vue 報 Cannot read property ‘prototype‘ of undefined
報錯信息： Cannot read property 'prototype' of undefined
這個錯 可能是 js 引入順序問題造成的 也有可能是 引入 elemen-ui造成的 。還有可能是 其它 問題造成的。
vue3 需要引入 element-plus ，引入 element-ui 也會報這個錯
引入順序問題：
在 public/index.html 中引入 ElementUI 的 js 時，前面沒有加 Vue.js 的引入。這里我們在前面加入 Vue.js 的引入即可。
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.9.2/index.js"></script>
解決方案：
代碼報錯主要是因為vue引用順序不當(dāng)導(dǎo)致的，或者是webpack打包時使用import引入vue,element卻使用script引入也會出現(xiàn)這個問題 （引入js的順序不合適）。
將vue引用放在最前面可避免這個問題。
先引入 vue 或者 vue.js 如果是 ui庫 要先引入 js再引入 css 。
到此這篇關(guān)于完美解決vue中報錯 “TypeError: Cannot read properties of null (reading ‘forEach‘)“的文章就介紹到這了,更多相關(guān)vue中報錯Cannot read properties of null 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中實現(xiàn)高德定位功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了如何解決wang-editor 上傳圖片后端接收不到的問題，文中通過圖文結(jié)合給大家講解的非常詳細，對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
elementui之el-table-column日期格式顯示方式
文章介紹了如何使用formatter屬性對表格某一列的內(nèi)容進行日期格式化,通過綁定日期格式化的方法實現(xiàn),展示了前端代碼的模板和方法,并給出了前端效果的展示2024-12-12
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了詳解vue 兼容IE報錯解決方案，詳細的介紹了幾種原因及其解決方案，非常具有實用價值，需要的朋友可以參考下2018-12-12
今天小編就為大家分享一篇關(guān)于vue-router傳參用法詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
今天小編就為大家分享一篇在Vue項目中,防止頁面被縮放和放大示例，具有很好的參考 價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue3的基本使用方法,結(jié)合實例形式詳細分析了vue3功能、組件、生命周期、TypeScript結(jié)合運用等相關(guān)概念與使用方法,需要的朋友可以參考下2023-06-06
Vue mock.js模擬數(shù)據(jù)實現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能
這篇文章主要介紹了Vue mock.js模擬數(shù)據(jù)實現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能，mockjs是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨立開發(fā)。我們可以使用真實的url，mockjs可以攔截ajax請求，返回設(shè)定好的數(shù)據(jù)2022-09-09