关于Error in render: "TypeError: Cannot read property ‘0’ of null"问题的解决方法

//这里是原生代码块，也就是运行该块代码，会出现上图中的问题
<li @click="gotoProduct"><img v-bind:src="goods[0].goodsPicture" alt="小米路由器A4"><h4>{{goods[0].goodsName}}</h4><p>{{goods[0].goodsIntroduction}}</p><span>{{goods[0].goodsPrice}}元</span>

出现该种情况的根本原因：
由于vue中存在异步调用，所以在vue的渲染机制中，异步数据先显示初始数据，再显示从后台带回的数据，所以当vue首先执行的时候，goods里面根本就没有数据，所以前台才会报出 Error in render: "TypeError: Cannot read property ‘0’ of null"的错误，那么解决方法很简单，就是在加载该模块时添加一个判断语句，如果“goods”为空的时候，就不进行该模块的渲染，更改后代码如下：

<li @click="gotoProduct" v-if="goods!=null"><img v-bind:src="goods[0].goodsPicture" alt="小米路由器A4"><h4>{{goods[0].goodsName}}</h4><p>{{goods[0].goodsIntroduction}}</p><span>{{goods[0].goodsPrice}}元</span>

主要的更改就是在li标签中添加了一个v-if的判断语句，当goods为空时，取消对该模块的渲染，以此来解决 Error in render: “TypeError: Cannot read property ‘0’ of null” 的问题

之前也看过很多解决问题的方法，然后自己的话主要是想写一个博客来记录一下自己所遇到并解决的问题
如果还有什么问题，请评论区的大佬指出来，谢谢啦

关于Error in render: TypeError: Cannot read property '0' of null问题的解决方法相关推荐

Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: TypeError: Cannot read property '0' of unde
1,项目报错: 把数组定义下,把异步请求的数据赋给定义的变量数组
vue.js:597 [Vue warn]: Error in render: “TypeError: Cannot read property ‘img‘ of null
通常而言这个问题是后台给前端传入一个空值,首先向检查下mybatis-plus重写是否正确,或者是自定义的sql是否正确这里可以发现小怪兽的写的还是正确的,然后问题在哪呢?在最终的检查下小怪兽发现了 ...
vue错误：vue.esm.js?efeb:628 [Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘ of
控制台出现这个错误vue.esm.js?efeb:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'mat ...
Error in render: “TypeError: Cannot read property ‘banners‘ of undefined“” 渲染错误问题（render是渲染时候报错的）
[vue踩坑]Error in render: "TypeError: Cannot read property 'banners' of undefined"" 渲染错 ...
vue中通过arr.length获取数组长度报错：Error in render: “TypeError: Cannot read property ‘length‘ of undefined“
刚开始是通过arr.length获取数组长度的! 结果控制台报错: Error in render: "TypeError: Cannot read property 'length' of ...
报错vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘length‘
在用 element-ui 做表单复选框的时候,出现报错 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeErro ...
echarts Cannot read property ‘getAttribute‘ of null 问题的解决方法
echarts Cannot read property 'getAttribute' of null 问题的解决方法参考文章: (1)echarts Cannot read property 'g ...
[Vue warn]: Error in render: TypeError: _self.$scopedSlots.default is not a function 错误解决
出现[[Vue warn]: Error in render: "TypeError: _self.$scopedSlots.default is not a function"] ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘
错误截图踩坑原因在配置vue-router的路由时和将router实例挂载至Vue实例上时,实例名称没有按照标准配置vue时在配置vue-router时,我们一般会将路由的映射关系抽成一个数组 ...

关于Error in render: TypeError: Cannot read property '0' of null问题的解决方法

关于Error in render: "TypeError: Cannot read property ‘0’ of null"问题的解决方法

关于Error in render: TypeError: Cannot read property '0' of null问题的解决方法相关推荐

最新文章

热门文章