Vue页面渲染错误：TypeError:Cannot read properties of undefined (reading ‘name‘)

等月光倾洒

已于 2023-05-19 08:45:56 修改

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue.js javascript 前端

于 2023-05-18 16:26:20 首次发布

本文链接：https://blog.csdn.net/rqz__/article/details/130749882

Vue.js 专栏收录该内容

7 篇文章

订阅专栏

文章解释了一个在Vue应用中常见的错误，当尝试访问未定义的对象属性时出现TypeError。通过展示一个Vue组件的代码示例，指出了问题在于数据未返回前就尝试访问`goods.categories[1].name`。文章提出了两种解决方案：使用可选链语法`?.`或结合`v-if`指令确保数据存在后再渲染。可选链语法是ES2020引入的新特性，允许安全地访问深度嵌套的属性而不会抛出错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeError:Cannot read properties of undefined (reading 'name‘)

错误信息：尝试读取一个undefined中的name

错误原因

错误代码如下：

<script setup>
const goods = ref({})
const getGoods = async () => {
  const res = await getDetail()
  goods.value = res.result
}
onMounted(() => getGoods())
</script>

<template>
<el-breadcrumb-item>{{ goods.categories[1].name }}</el-breadcrumb-item>
</template>

goods初始值为空对象，在数据没有返回之前，空对象取出的数据为undefined，所以报错

解决方法

可选链的语法?.
v-if手动控制渲染时机，保证只有数据存在才渲染

使用可选链语法"?"进行解决

<el-breadcrumb-item>{{ goods.categories?.[1].name }}</el-breadcrumb-item>

使用v-if进行解决

<template>
<!-- 通过某一个后端返回后才有的字段进行判断是否已经存在数据 -->
<div v-if="goods.details">
    <el-breadcrumb-item>{{ goods.categories[1].name }}</el-breadcrumb-item>
</div>
</template>

可选链语法

可选链语法是一种在对象的属性或方法为空值时防止抛出错误的解决方案。它使用问号（?）来判断一个对象是否为空。其语法如下：

object?.property // 对象的属性
object?.method() // 对象的方法

如果 object 存在，则取对象属性或调用方法；如果 object 不存在，各自返回 undefined，而不是抛出错误。可以使用可选链语法替代空检查和 null 或 undefined 值的测试，简化代码的编写和逻辑处理的过程。

例如，在以下的代码片段中，通过可选链语法避免了 user 和 user.address 属性值为 undefined时的运行时错误：

const user = {
  name: 'John',
  // address 属性被省略了
};

console.log(user?.address?.city); // Output: undefined

需要注意的是，可选链语法只能在 ES2020 以上版本的 JavaScript 中使用。