描述

在用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值,所以也会报错!

Error in render: "TypeError: Cannot read property '' of undefined"的更多相关文章

  1. [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function

    1.[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined 注意,只要出现Error i ...

  2. vue报错Error in render: "TypeError: Cannot read property '0' of undefined"

    通常有两种情况: 1.在模板的html标签上使用length报错 vue 中使用 length判断的时候,有时会报错,如下: <div class="item_list" v ...

  3. [VUE ERROR] Error in render: "TypeError: Cannot create property 'header' on boolean 'true'"

    项目基于ElemnetUi进行的开发,在引入第三方扩展库 vue-element-extends 之后使用它的表格组件报了这个错 解决方案: 1.  删除项目中的 node_modules 2. 删除 ...

  4. app.js:1274 [Vue warn]: Error in render: "TypeError: Cannot read property 'object_id' of undefined"问题小记

    凌晨遇到一个控制台报错的信息,总是显示有对象中的元素未定义 明明是有把定义对象的值的,后面发现是把没有返回值的函数又赋值一遍给未定义的元素所属的对象,

  5. Error in render: "TypeError: Cannot read property 'url_img' of undefined"

    如果我们 vue 组件中 template 里面添加了下标(靠数组索引得到的值),就会报索引为 undefined 解决方法: 在我们使用下标时,要在父组件上做条件判断,如果这个下标存在,然后就显示里 ...

  6. vue2.XX 提示[Vue warn]: Error in render: "TypeError: Cannot read property 'img' of undefined"

    item 是向后台请求的一条数据,里面包含img,但是却提示img未定义 父组件向子组件传递数据时, 子组件 具体代码: <img :src="item.img" /> ...

  7. [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined" found in <App> at src/App.vue

    当用Vue模块化开发时,输入  http://localhost:8080  页面没有显示,首先按F12,检查是否有如下错误 话不多说,直接看下面: 解决方法1 如果是上面出的问题,以后就要注意了哦, ...

  8. Vue 报错Error in render: “TypeError: Cannot read properties of null (reading ‘xxx’)” found in

    前端vue报错 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'name' ...

  9. TypeError: Cannot read property '$$' of undefined at HTMLElement._attached.wx.getPlatform._touchstartHandlerForDevtools

    TypeError: Cannot read property '$$' of undefined     at HTMLElement._attached.wx.getPlatform._touch ...

随机推荐

  1. TrueCrypt与CryptSetup双系统全盘加密(图文)

    http://blog.topsec.com.cn/truecrypt%E4%B8%8Ecryptsetup%E5%8F%8C%E7%B3%BB%E7%BB%9F%E5%85%A8%E7%9B%98% ...

  2. Linux性能分析利器——火焰图的安装使用

    火焰图(flame graph)是性能分析的利器,通过它可以快速定位性能瓶颈点. perf 命令(performance 的缩写)是 Linux 系统原生提供的性能分析工具,会返回 CPU 正在执行的 ...

  3. CentOS7安装开发工具套件时报错解决方案

    操作系统:CentOS 7.2 执行安装命令时显示以下信息: [root@DEV-CMDB-DB02 ~]# yum -y groupinstall "Development Tools&q ...

  4. 如何使用 IoC

    创建Maven工程,pom.xml添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project x ...

  5. GO学习-(11) Go语言基础之map

    Go语言基础之map Go语言中提供的映射关系容器为map,其内部使用散列表(hash)实现. map map是一种无序的基于key-value的数据结构,Go语言中的map是引用类型,必须初始化才能 ...

  6. Go语言web开发---Beego基础

    一.框架 框架:可复用的设计组件,它规定了应用的体系结构,明确了整个设计,协作各个组件之间的依赖关系,责任分配,和流程控制.通俗解释框架就是一堆代码的集合,为了提高软件的开发效率和质量,一般都会使用框 ...

  7. 部署TVM Runtime

    部署TVM Runtime本文主要介绍如何在开发板上部署TVM Runtime, 在本地机器安装完整的TVM(包含了TVM Runtime以及编译功能), 并且使用一个简单的远程调用例子测试是否部署成 ...

  8. CVPR目标检测与实例分割算法解析:FCOS(2019),Mask R-CNN(2019),PolarMask(2020)

    CVPR目标检测与实例分割算法解析:FCOS(2019),Mask R-CNN(2019),PolarMask(2020)1. 目标检测:FCOS(CVPR 2019)目标检测算法FCOS(FCOS: ...

  9. ADAS系统长篇综述(下)

    ADAS系统长篇综述(下) 四.ADAS架构设计的进化阶梯 前面谈到的产品的商业化推广渗透和产品的功能演进渗透,目的是让大家去概念化.当然,最后的赢家一定是实干者,能够在具体技术实现路径上进行深度耕耘 ...

  10. NVIDIA® TensorRT™ supports different data formats

    NVIDIA TensorRT supports different data formats NVIDIATensorRT公司 支持不同的数据格式.需要考虑两个方面:数据类型和布局.         ...