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

hykeda1年前Vue252

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


相关文章

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

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

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

在html5中使用Vue3,并且使用组件形式

有的时候为了使用vue编写一些前端程序,如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢?接下来详细介绍:1)引入Vue,并创建Vue实例在官网上,已经讲得很清楚了,我们可以这样使用&nbs...

vue3项目,Element-plus ElMessage API 调用样式丢失问题

1、Element-plus使用了自动按需导入,vite.config.js配置如下:defineConfig({     plugins: [...

学习lodash

官网:https://www.lodashjs.com/ 链接:https://www.jianshu.com/p/d46abfa4ddc9 简介 L...

vue3中给响应式数据赋值操作,以及toRef 和 toRefs区别

最近在开发vue3时,定义了一个变量:let form = reactive({});form = res.items;这里我将接口获取到的数据直接赋给了form,这样我在表单中:<el-for...

Vue2.x笔记

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

发表评论    

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