首页 新闻 搜索 专区 学院

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

0
悬赏园豆:50 [已解决问题] 解决于 2021-02-22 15:03

前台在created()方法中发送axios请求获取后台数据

data的前期数据初始化为

模板中

后台返回的数据正常

但是页面无法渲染数据报错

求大佬们帮忙解答

python_zzy的主页 python_zzy | 初学一级 | 园豆:74
提问于:2021-02-20 16:17
< >
分享
最佳答案
0

你先看看vue生命周期这一地方吧:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示,

页面打开后,根据vue生命周期推断,如果你在created函数发起异步请求,那么Vue生命周期还处在mounted之前,而mounted之后Vue才把dom元素挂在到Vue对象中的,这个时你候就开始在html标签里面使用声明式渲染了,而且你数据结构也没有,那肯定就会出现找不到或未定义的异常,你想想是不是这么回事?所以控制台才报错。

要么你尝试在mounted函数里面发起异步请求,要么就老老实实把数据的结构给写出来。

建议经常阅读Vue官方文档,很多问题都是自己的小细节没有到位导致的。

而且你在created函数发起异步,数据不给结构,有时候json数据是一层还好,可以拿到,有时候两层甚至以上就拿不到了,偶尔渲染数据成功,偶尔就不行。

收获园豆:30
shiramashiro | 菜鸟二级 |园豆:227 | 2021-02-21 01:39

针对这个问题我补充一下:

  1. Vue把所有*.vue文件的template全部解析到了index.html的名为app的div标签内;
  2. 同时template中使用了声明式渲染获取数据;
  3. 由于在data内部定义的course_list还没有被真实的数据给覆盖掉,所以在声明式渲染时其实是一个空值,所以报错undefined;
  4. 之后生命周期钩子进行异步操作,获取了后台的数据,并覆盖掉data的course_list,此时course_list承载了后台的数据;
  5. 最后使用console.log打印,会成功显示所有数据;而在第2步中没有你使用的字段,所以在页面中才不会显示数据。

可以查看我对此问题写的播客:
https://www.cnblogs.com/kongsam/p/14483218.html

shiramashiro | 园豆:227 (菜鸟二级) | 2021-03-04 22:12

@kongsam: 如果是数组套多个对象的数据结构该如何写呢,比如[{}, {}, {}], 后台返回的是这样一个真实数据,在data中该如何写出数据结构

python_zzy | 园豆:74 (初学一级) | 2021-03-14 21:44

@python_zzy: 你数据该是啥结构就写啊

[
 {
   key1: "value1",
   key2: "value2",
   ......
 },
 {
   key3: "value3",
   key4: "value4",
   ......
 }
]
shiramashiro | 园豆:227 (菜鸟二级) | 2021-03-14 21:47

@python_zzy: 确实我遇到的问题就是这样搞的,要拿什么key就写它对应的结构出来,就不会像贴主那样的问题。

shiramashiro | 园豆:227 (菜鸟二级) | 2021-03-14 21:48

@kongsam: 后台返回的数组套对象的数据中,里面的对象是不固定数量的,只写一个就可以了吗?写数据结构我是试过的,但是跟你上面那样的写的只写一个对象的数据结构是不行的

python_zzy | 园豆:74 (初学一级) | 2021-03-14 21:51

@python_zzy: 数据套对象,对象不固定,只写一个即可。后台返回的数据会覆盖掉你事先写的结构,不用全部写完。这样做就是以免vue报错,直接拿某个key(x)不识别。

[
 {
   key1: "value1",
   key2: "value2",
   ......
 },
]
shiramashiro | 园豆:227 (菜鸟二级) | 2021-03-14 21:55

@kongsam: 好的,我明白了,谢谢

python_zzy | 园豆:74 (初学一级) | 2021-03-14 21:57

@python_zzy: 甚至你不用写完key,只写你在标签里面渲染哪个key,你就只写你要用的key即可。因为后台返回的数组是会覆盖掉之前的结构的,以及填充数据进去。

shiramashiro | 园豆:227 (菜鸟二级) | 2021-03-14 21:58

@kongsam: ok

python_zzy | 园豆:74 (初学一级) | 2021-03-14 21:58
其他回答(2)
0

集合做个非空判断。
vue是异步请求。页面渲染刚开始的时候还没有拿到这个值,所以会报错。在vue中对该值进行if判断(v-if = " ")。当该对象有值的时候再进行渲染。
参考:freesion.com/article/80191021817/

收获园豆:10
Ctrl` | 园豆:3246 (老鸟四级) | 2021-02-20 16:23

具体应该在哪加判断?

支持(0) 反对(0) python_zzy | 园豆:74 (初学一级) | 2021-02-20 16:31

@python_zzy: 一种是course.name单独加。或者是course集合都行呀

支持(0) 反对(0) Ctrl` | 园豆:3246 (老鸟四级) | 2021-02-20 16:39

@Ctrl`: 我在course.name的父标签加了 不行

支持(0) 反对(0) python_zzy | 园豆:74 (初学一级) | 2021-02-20 16:48

@Ctrl`: 而且我昨天直接这种方式也是可以渲染数据的,没有做任何改动今天就不行了

支持(0) 反对(0) python_zzy | 园豆:74 (初学一级) | 2021-02-20 16:53
0

v-for="course in course_list" :key="course.name" 改成 v-for="(course,index) of course_list" :key="index"
或者试试将 return下的course_list:[] 改成course_list:[{name:''}]
或者在v-for的外层div上加 v-if=“course_list”
可以试试看能否解决

收获园豆:10
___mouM | 园豆:1 (初学一级) | 2021-02-22 08:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册