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

hykeda3年前Vue1316

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


相关文章

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

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

Vue3二维码生成

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

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

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

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

vue中的h函数使用

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

vite配置代理proxy实现跨域问题

最近在开发vite+vue项目时,调用接口获取服务器数据时提示接口有跨域问题,解决办法是配置代理:export default defineConfig({  //配置代理  se...

Vue2.x笔记

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

发表评论    

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