vue Cannot read property ‘0‘ of undefined“ 问题及解决方案

简介: 笔记

问题分析


1. 当我们表单取值时,如下:

3.png

2. 多级取值,例如取的值是:Obj.class.student.img[0]

报错:

4.png

报错翻译是:render中出错:“TypeError:无法读取未定义的属性“0”


更奇怪的时候,界面正常显示,我们也能正常取到值,但开发者工具会报错。


那这就是很多强迫症患者不能忍的了,,,


原因及解决方案



原因:vue中模板在渲染时候,读取对象中的某个对象的属性值时,这个对象中的某个属性并不存在(可能仍然在等待请求后台赋值),所以报错,接口请求到数据,数据会被正常渲染。


流程大致是这样:


1. data()中定义了对象Obj


2. 模板渲染了Obj的a属性(a属性并未给初始值,需要从后台渲染)


3. 运行项目,编译模板(此时还没有请求接口,一般会在created()里请求)


4. 控制台报错(如上)


5. 请求接口,拿到数据


6. 数据会正常渲染,报错也会存在在


解决方案:


1. 给对象设置初始值,适用于浅层数据,不超过2层(一般深层次访问肯定麻烦)


2. 加个v-if判断,没有值就不取,如下:


5.png

目录
相关文章
|
2天前
|
资源调度 前端开发
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
19 0
|
2天前
|
iOS开发 MacOS
TypeError: Cannot read property ‘shop‘ of undefined
TypeError: Cannot read property ‘shop‘ of undefined
6 0
|
2天前
|
机器学习/深度学习
TypeError: Cannot read property ‘name‘ of undefined at Qe.onShow
TypeError: Cannot read property ‘name‘ of undefined at Qe.onShow
6 0
|
1月前
|
JavaScript
报错 Cannot read properties of undefined(reading‘addEventListener‘)如何解决
报错 Cannot read properties of undefined(reading‘addEventListener‘)如何解决
34 1
|
1月前
|
小程序 开发者
【Hbuilder】Hbuilder Cannot read property ‘forceUpdate‘ of undefined
【Hbuilder】Hbuilder Cannot read property ‘forceUpdate‘ of undefined
19 0
|
1月前
|
JavaScript
JS中Null和Undefined的区别及用法
JS中Null和Undefined的区别及用法
15 1
|
2月前
|
JavaScript 前端开发 算法
undefined与null的区别
在JavaScript中,undefined和null都表示变量未被赋值或值缺失,但它们在使用场景上有一些区别。 - **`语义不同`**:undefined表示一个变量未被赋值或者声明后未进行初始化。而null表示一个变量被明确地设置为无值或者表示空值的概念。 - **`类型不同`**:undefined是一种基本数据类型,而null是一个引用类型。 - **`条件判断`**:在条件判断中,使用if (variable === undefined)或者if (variable === null)可以进行区分。
|
3月前
|
JavaScript 前端开发 程序员
分享18个用于处理 null、NaN 和undefined 的 JS 代码片段
Null、NaN 和 undefined 是程序员在使用 JavaScript 时遇到的常见值。 有效处理这些值对于确保代码的稳定性和可靠性至关重要。
|
4月前
|
JavaScript 前端开发 API
null和undefined:两个JavaScript中的特殊值(二)
null和undefined:两个JavaScript中的特殊值
|
4月前
|
JavaScript 前端开发 安全
null和undefined:两个JavaScript中的特殊值(一)
null和undefined:两个JavaScript中的特殊值