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

hykeda2年前Vue1045

含义:
渲染时发生错误:类型错误:不能读取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


相关文章

vue中的h函数使用

一、参数设置h函数接收三个参数。第一个参数:,可以为一个html标签,一个组件,一个异步组件,或者是一个函数式组件。第二个参数:{ Object } Props,与attributes和props,以...

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

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

关于uni-app 中 使用async + await 将异步请求同步化

这段时间在使用uni-app开发小程序,希望在页面加载时,获取地区数据,然后展示到页面上。一开始写在了onLoad方法上,发现页面加载时,用异步uni.request方法获取数据,当页面加载完后,异步...

前端常用的UI组件库

Arco DesignTaro UISemi DesignAnt DesignElementView DesignVantLayui-vueFusion Design1. Arco Desi...

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

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

Vue3二维码生成

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

发表评论    

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