element 页面回显正常可以控制台仍然报错的解决办法

176 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

在使用element开发后台管理系统时,经常会遇到一些问题,比如当我们在做新建功能时,一般都直接选择就可以了,但有时我们会用到编辑功能,也就是要将数据进行反显,这里就会出现一些小问题,比如在使用中,我们的数据是嵌套的对象,如下图:
在这里插入图片描述
在这里插入图片描述
当页面运行时我们可以看到页面上能正常的回显数据,可是我们可以看到控制台还是会报错,如下图:
在这里插入图片描述
那这是什么原因导致的呢,其实这个跟vue的生命周期有关,当页面刚进来时,数据还没有传过来,但页面已经渲染了了,其实这时我们会发现只需在页面显示时加一个判断就不会再报错了,如下图:
在这里插入图片描述
具体是什么原因导致的呢?
我们可以试试,在mounted里面去打印这个对象,会发现打印出来是空的,这也就是页面加载的时候,数据还没有传过来,但是这时候我们已经开始在使用了,所以会报undefined的错误,当数据的值传过来的时候,页面找到这个数据,并渲染上去,所以我们看到的页面又是正常了。因此,我们加上一个判断,当数据没有拿到时,页面不会去渲染,等拿到数据后页面再渲染,此时我们看到页面显示正确,同时又不会报错了。

记录工作中遇到的问题,方便日后查看,以及和大家一起学习。欢迎大家一起学习交流V:Wendycwb