Vue3---报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘1‘)

velpro_!

已于 2023-07-09 18:05:57 修改

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

于 2023-07-09 18:05:06 首次发布

本文链接：https://blog.csdn.net/weixin_52053631/article/details/131625489

文章讨论了在Vue应用中遇到的问题，即当goods对象初始化为空时，尝试访问goods.category导致的undefined错误。提出了两种解决方案：一是使用可选链操作符(?.)来避免引用错误；二是通过v-if指令控制渲染，确保数据加载后再显示相关内容。示例代码展示了这两种方法在模板中的应用。

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

问题原因：当goods刚定义时为空对对象， { }.category 的值就为 undefined

解决方法1：可选链的语法 ?.

解决方法2：v-if手动控制渲染时机，保证只有数据存在才渲染

<script setup>
import {getDetail} from "@/apis/detail";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";

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

<template>
 <!--  方法二  -->
<!--details为goods里的某一个字段-->
<div class="container" v-if="goods.detail">
      <el-breadcrumb separator=">">
           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
           <!--
               goods一开始是 {}， {}.category   -> undefined
               解决方法1：可选链的语法  ?.
               解决方法2：v-if手动控制渲染时机，保证只有数据存在才渲染
           -->
           <el-breadcrumb-item :to="{ path: `/category/${goods.category[1].id}` }">{{ goods.category[1].name }}
           <!-- 方法一  -->
           <!--<el-breadcrumb-item :to="{ path: `/category/${goods.categories?.[1].id}` }">{{ goods.categories?.[1].name }}-->
           </el-breadcrumb-item>
           <el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories[0].id}` }">{{ goods.categories[0].name }}
           <!--<el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories?.[0].id}` }">{{ goods.categories?.[0].name }}-->
           </el-breadcrumb-item>
      </el-breadcrumb>
</div>
</template>