完美解决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

这个错 可能是 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 。

到此这篇关于完美解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“的文章就介绍到这了,更多相关vue中报错Cannot read properties of null 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3.0报错Cannot find module ‘worker_threads‘的解决办法

     记录一下vue3.0的第一次尝试,启动项目的时候报错Cannot find module 'worker_threads',查了一下发现是因为个人电脑node版本太低,查看了一下版本 node -v v11.2.0 然后升级一下自己的node版本再执行启动命令就OK了 npm install -g n (mac记得加sudo) n latest 总结:需要把node.js升级到版本12以上,就可以解决vue3.0报错Cannot find module 'worker_threads'的问题了

  • Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法

    Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法

    发现问题 运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 点开错误的文件,标注错误的地方是这样的一段代码: import {normalTime} from './timeFormat';

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

    完美解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“ 报错截图: 报错原因: 上图的报错翻译过来其实就是无法读取 null 的属性.简单来说就是循环遍历的数组是 null 值,而一旦循环遍历的数组为 null 值的同时再使用 forEach 方法遍历数组就会出现此报错. 解决方案: 知道报错的原因,那么问题也就能迎刃而解了,由于之前是因为 null 值的问题才导致循环遍历报错,那么我们完全可以在进入循

  • 解决Python中报错TypeError: must be str, not bytes问题

    如下所示: #!/usr/bin/python import pickle shoplist=['apple','mango','carrot'] f = open('c:\poem.txt','w') pickle.dump(shoplist,f) f.close() del shoplist f = open('c:\poem.txt','r') storedlist = pickle.load(f) print(storedlist) 执行上述程序时候报错: TypeError: must

  • 完美解决vue 中多个echarts图表自适应的问题

    看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>

  • npm install编译时报"Cannot read properties of null (reading ‘pickAlgorithm‘)"错误的解决办法

    npm install编译时报"Cannot read properties of null (reading ‘pickAlgorithm‘)"错误的解决办法

    目录 先看报错: 方案一: 方案二: 方案三: 我的解决方案 总结: 先看报错: 先说下网上大多数的解决方案: 方案一: 重新安装node解决 方案二: 删了node models重新下 或者直接下载CNPM(淘宝镜像)进行安装 CNPM安装办法 npm install -g cnpm -registry=https://registry.npm.taobao.org 查看cnpm是否真安装成功 cnpm -v 方案三: 清除缓存npm cache clear --force之后再重新安装依赖n

  • Vue报错:TypeError: Cannot create property ‘xxxx‘ on的解决

    Vue报错:TypeError: Cannot create property ‘xxxx‘ on的解决

    目录 TypeError: Cannot create property ‘xxxx‘ on [Vue warn]: Error in nextTick: "TypeError: Right-hand side of 'instanceo 原因 解决办法 解决根据 TypeError: Cannot create property ‘xxxx‘ on 使用element的upload上传时报错 出现这种错通常是你的数据和需要的数据格式不匹配 查看官网发现需要的是这种格式[{},{}] 我的代码

  • Vue 报错TypeError: this.$set is not a function 的解决方法

    报错场景:将APi中得到的response数据,用Vue$set()使数据动态响应 报错代码: methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to

  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    目录 一.简单介绍 二.报错现象 三.问题分析 四.问题处理 1.查看 node 版本和 node-sass 版本依赖关系 2.查看 当前 node 版本和 node-sass 版本是否符合依赖关系 3.当前 node 版本和 node-sass 版本符合依赖关系,可能就是 sass-loader 版本过高,卸载 sass-loader 4.尝试安装低版本的  sass-loader 5.运行 vue 工程,顺利通过了 总结 一.简单介绍 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    在路由配置中,设置重定向后,浏览器打开是空白没有内容,这里首先确保你的结构没有写错,然后查看单词是否拼错误,一般情况是因为单词拼写错误. 修改后,跳转成功: 附录:VUE通过后端重定向到VUE的页面后,前端路由失效的解决方案 这个问题是我在做微信授权登录的时候遇到的. 具体描述: 用户打开页面后,路由拦截判断用户是否登录,如果未登录,则将用户的访问地址记录到localStorage里面,等待授权后重定向到该页面. 当我使用location.href将页面跳转到后端地址,进行微信用户信息获取完成,

  • 解决vue 使用axios.all()方法发起多个请求控制台报错的问题

    今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错,后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上,需要我们手动去添加 == 只需要在你封装的axios文件里加入 == instance.all = axios.all 就完美解决了! 补充知识:vue项目中使用axios.all处理并发请求报_util2.default.axios.all is not a function异常 报错: _util2.default.axios.

随机推荐