问题分析
1. 当我们表单取值时,如下:
2. 多级取值,例如取的值是:Obj.class.student.img[0]
报错:
报错翻译是:render中出错:“TypeError:无法读取未定义的属性“0”
更奇怪的时候,界面正常显示,我们也能正常取到值,但开发者工具会报错。
那这就是很多强迫症患者不能忍的了,,,
原因及解决方案
原因:vue中模板在渲染时候,读取对象中的某个对象的属性值时,这个对象中的某个属性并不存在(可能仍然在等待请求后台赋值),所以报错,接口请求到数据,数据会被正常渲染。
流程大致是这样:
1. data()中定义了对象Obj
2. 模板渲染了Obj的a属性(a属性并未给初始值,需要从后台渲染)
3. 运行项目,编译模板(此时还没有请求接口,一般会在created()里请求)
4. 控制台报错(如上)
5. 请求接口,拿到数据
6. 数据会正常渲染,报错也会存在在
解决方案:
1. 给对象设置初始值,适用于浅层数据,不超过2层(一般深层次访问肯定麻烦)
2. 加个v-if判断,没有值就不取,如下: