解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题

 更新时间:2024年03月11日 10:02:19   作者:蓝胖子的多啦A梦  
这篇文章主要介绍了解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

请求接口时,能够完整渲染出整体界面无问题,但开发者工具仍然报出:

“Error in render: "TypeError: Cannot read properties of undefined (reading ‘ipconfig’)"

具体如下

解决报错

意思就是模板在渲染时候,读取对象中的某个对象的属性值时,这个对象不存在,说通俗点就是三层表达式a.b.c,在对象a中没有对象b,那么读取对象a.b.c中的值,自然会报错。

如果是两层表达式a.b则不会报错,返回的是undefined。

明白了原因之后上手排查代码发现果然下面vue模板代码中出现了三层表达式,十分可疑,出错的地方应该就在这里,不过为什么呢?

原因

我们发现这里的queryData是vuex中state管理加载的数据,异步调用显示,然后vue渲染机制中:

异步数据先显示初始数据,再显示带数据的数据,

所以上来加载queryData时候还是一个空数组如下

当渲染完成后,才加载异步数据

所以在渲染时,出现的三层表达式在queryData中取queryData[0]数组中的下标为0的对象还不存在

再在这个对象中取其他值自然会报错,但是渲染完成后,queryData中的值加载好了,自然可以取到,这也就解释了为什么界面正常显示,但开发者工具会报错的原因。

解决方案

在上面一个div中添加v-if判断条件,如果queryData[0]取不到,则不加载该div即可解决。

(注意,不能用v-show,v-show的机制是加载后,根据条件判断是否显示)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE实现日历组件功能

    VUE实现日历组件功能

    本篇文章主要介绍了VUE实现日历组件功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Vue中methods实现原理是什么

    Vue中methods实现原理是什么

    methods是如何绑定this的 methods绑定上下文执行环境是通过bind来进行的呢,本文给大家介绍Vue中methods实现原理是什么,感兴趣的朋友一起看看吧
    2023-11-11
  • Vue之ElementUI Form表单校验

    Vue之ElementUI Form表单校验

    这篇文章主要为大家详细介绍了Vue之ElementUI Form表单校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue.js中for循环如何实现异步方法同步执行

    vue.js中for循环如何实现异步方法同步执行

    这篇文章主要介绍了vue.js中for循环如何实现异步方法同步执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue3中Vuex的详细使用方法

    Vue3中Vuex的详细使用方法

    在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同,下面这篇文章主要给大家介绍了关于Vue3中Vuex详细使用的相关资料,需要的朋友可以参考下
    2022-07-07
  • vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    这篇文章主要给大家介绍了关于利用vue+elementUI实现多文件上传与预览功能的相关资料,包括word/PDF/图片/docx/doc/xlxs/txt等格式文件上传,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 在vue-cli中组件通信的方法

    在vue-cli中组件通信的方法

    本篇文章主要介绍了在vue-cli中组件通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue+ElementUI怎么处理超大表单实例讲解

    Vue+ElementUI怎么处理超大表单实例讲解

    在本篇文章里小编给大家整理的是一篇关于Vue+ElementUI怎么处理超大表单实例讲解内容,以后需要的朋友可以跟着学习参考下。
    2021-11-11
  • Vue.js中el-table表格自定义列控制与拖拽

    Vue.js中el-table表格自定义列控制与拖拽

    本文主要介绍了Vue.js中el-table表格自定义列控制与拖拽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue使用html2canvas实现将DOM节点生成对应的PDF

    vue使用html2canvas实现将DOM节点生成对应的PDF

    这篇文章主要为大家详细介绍了vue如何使用html2canvas实现将DOM节点生成对应的PDF,文中的示例代码简洁易懂,感兴趣的小伙伴可以学习一下
    2023-08-08

最新评论