Error in render: "TypeError: Cannot read property '' of undefined"
2024-08-27 06:52:00
描述
在用Vue的时候出现了一个令人窒息的错误
报错显示 “avatar” 未定义,但在postman中测试返回的数据确实有“avatar”,可是为什么未找到?
然后我在控制台中打印从后台获取到的数据:
{
"id": 3,
"date": "2021-01-22 21:11:32",
"organizer": {
"id": 1,
"avatar": "http://oss.norza.cn/imgs/avatar/organizer/1/avatar01.jpg",
"username": "kongsama",
"profile": "time tick away, dream faded away!",
}
}
通常情况下,在请求之后的数据会赋值给data里边的变量,data的video中没有其他字段(属性):
data() {
retrun {
video: {}
}
}
思考
因为获取数据是异步操作,也就是页面渲染和请求操作是非同步的,页面渲染那个时候拿到的video还没有任何数据,而渲染完成之后才拿到了video数据,报错可能是数据还正在请求时发出的。
所以,将字段(属性)填充完整就可以避免Vue提示错误,字段可以选择性填充,比如在template中用哪个字段,就写哪个字段名称即可。
解决
{
"organizer": {
"avatar": "",
}
}
在template中只用到了avatar,所以我就把它上层结构也写出来。如果是数组形式的,只需要写一个结构,因为后期会被覆盖掉的。
其他方案
网上还有一种解决方法是,在渲染的那层标签外套一个v-if
判断字段是否存在,
明确地告诉你,这种方法是不可行的,本来页面渲染和请求操作是非同步的,页面渲染那个时候拿到的video还没有任何数据,而渲染完成之后才拿到了video数据,
所以v-if
判断的对象本身就是null值,所以也会报错!
最新文章
- Jquary入门(添加 修改 表单元素)+ JSON+弹框
- [LeetCode] Nth Highest Salary 第N高薪水
- 大数据系列(4)——Hadoop集群VSFTP和SecureCRT安装配置
- 关于Unity中SteamVR_Controller.Input的错误
- Firemonkey 载入 Style 皮肤 (*.fsf 二进制文件) 速度测试
- (转) Docker swarm 之介绍与使用
- Java for LeetCode 045 Jump Game II
- Python学习总结5:数据类型及转换
- WebKit笔记
- 破解https和https原理
- QT皮肤系统的动态切换
- ios 中的构造方法
- php 数组操作符
- 【递归与分治】 poj 1017
- Servlet - 基础
- 结构型---享元模式(Flyweight Pattern)
- 机器学习(Machine Learning)算法总结-决策树
- .Net MVC个人笔记
- 13机器学习实战之PCA(2)
- MATLAB中多个一维数组的合并