出现该问题时浏览器能够正常的显示数据功能,但是控制台会报错:Error in render: "TypeError: Cannot read property 'categories' of undefined",具体如下:
该问题的本质是vue的渲染机制问题, vue在渲染时,读取某个对象的属性时找不到对应的对象。这个问题只会发生在三层表达式中,即a.b.c,在二层表达式中会返回undefined。通常发生在子组件使用父组件传入的值时。
根本原因
vue的渲染机制中,异步数据先显示初始数据,再显示传入的数据,因此在使用该对象时,很可能是在对一个空对象进行操作,当渲染完成了,数据才传入过来。所以在渲染时,出现的三层表达式的对象的属性还不存在,再在这个对象中取其他值自然会报错,但是渲染完成后,对象中的值加载好了,自然可以取到,这也就解释了为什么界面正常显示,但控制台会报错的原因。
解决方案
我们需要在所有的数据传输完成之后在进行加载,因此可以给该元素加上一个v-if判断,在该属性存在时再对该元素进行渲染: