[Vue warn]: Error in render: “TypeError: Cannot read property ‘name‘ of undefined“,报错,已解决。

hykeda3年前Vue1389

含义:
渲染时发生错误:类型错误:不能读取undefined的name属性

原因:
出现上述报错其实是因为,你访问了undefined.name,但是 undefined 没有 name,所以报错。

原因有两种,

1,你的数据是异步加载,页面渲染的时候,还没有加载成功

2,数据是本地数据,压根没有name数据、

解决方案:

无论是哪一种方案都是因为访问的对象不存在

办法一:ES6可选链操作符号

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
 
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

办法二:

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
 
const dagName = adventurer.dog && adventurer.dog.name
console.log(dogName);
// expected output: undefined


相关文章

在写css时不起作用,请排查是否是scoped的问题

在写css的时候,用了框架自带的组件table和card,把table包在了card里面,然后发现table的分页样式出现了问题,查看源码后发现card中写了ul li { margin-left:2...

vue3 拖拽插件 vue.draggable.next

官网地址:https://github.com/SortableJS/vue.draggable.next安装:npm i -S vuedraggable@next引入插...

Vue3二维码生成

一、装上插件npm install --save qrcode.vue二,引入插件到页面中import QrcodeVue from ...

Vue2.x笔记

vue2.0 开始不能挂载到<html> 或者 <body> 上。 transition 动画过渡的时候,如果是:<transit...

页面直接使用ElementUI,官方提供的表格代码,样式错乱

页面直接使用ElementUI,官方提供的表格代码,样式错乱

在使用element编写前端代码是,引入element的css和js,使用官方提供的例子:<template>   <el-table :data=&...

uni-app中使用iconfont字体,亲测有用

一、下载好iconfont文件,复制iconfont.ttf这个文件至项目。 在你的项目中创建一个iconfont.css文件,文件内容: @font-face { font-fam...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。