网络编程
位置：首页>> 网络编程>> JavaScript>> 完美解决vue中报错 “TypeError: Cannot read properties of null (reading'forEach')“

完美解决vue中报错 “TypeError: Cannot read properties of null (reading'forEach')“

作者：水星记_　　发布时间：2023-07-02 17:06:29　

标签：vue,报错Cannot,read,properties,of,null

完美解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“

报错截图：

完美解决vue中报错 “TypeError: Cannot read properties of null (reading'forEach')“

报错原因：

上图的报错翻译过来其实就是无法读取 null 的属性。简单来说就是循环遍历的数组是 null 值，而一旦循环遍历的数组为 null 值的同时再使用 forEach 方法遍历数组就会出现此报错。

解决方案：

知道报错的原因，那么问题也就能迎刃而解了，由于之前是因为 null 值的问题才导致循环遍历报错，那么我们完全可以在进入循环遍历之前将要循环遍历的数组做一个非空判断，如下代码：

未修改代码：

res.data.forEach((item) => {
 // 执行操作
});

加上非空判断后：

// 循环遍历之前加上非空判断
if (res.data) {
 res.data.forEach((item) => {
   // 执行操作
 });
}

补充：vue 报 Cannot read property ‘prototype‘ of undefined

报错信息： Cannot read property 'prototype' of undefined

完美解决vue中报错 “TypeError: Cannot read properties of null (reading'forEach')“

这个错 可能是 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引用顺序不当导致的，或者是webpack打包时使用import引入vue,element却使用script引入也会出现这个问题 （引入js的顺序不合适）。

将vue引用放在最前面可避免这个问题。

先引入 vue 或者 vue.js 如果是 ui库 要先引入 js再引入 css 。

来源：https://blog.csdn.net/Shids_/article/details/125741166

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com