Error in render: "TypeError: Cannot read property ‘XXXXXXXXX’ of null
渲染错误问题
问题:
搭建项目月计划详情页时,能够完整渲染出月计划数据详情页面无问题,但开发者工具仍然报出“Error in render: "Error in render: “TypeError: Cannot read property ‘monthPlanName’ of null””错误,具体如上三图。
经过一系类测试摸索 怀疑是父组件传递给子组件数据时 子组件初始化并没有马上取得父组件传递的数据而是“延迟” 取得,所以页面渲染无问题,控制台却会报错 所有info数据都没及时加载。
借用此篇文章感觉有相似的地方,如下文
**【根本原因】:
我们发现这里的info是vuex中state管理加载的数据,异步调用显示,然后vue渲染机制中:
异步数据先显示初始数据,再显示带数据的数据,**当渲染完成后,才加载异步数据
【解决方案】:
在上面一个div中添加v-if判断条件,如果info.supports取不到,则不加载该div即可解决。(注意,不能用v-show,v-show的机制是加载后,根据条件判断是否显示)
原文链接原文链接在这里-----------------------------------------------------------------------------
而我借鉴的代码如下