vue中报错：Error in render: TypeError: Cannot read property name(或者其他属性) of undefined解决办法

最新推荐文章于 2024-02-26 21:11:03 发布

原创最新推荐文章于 2024-02-26 21:11:03 发布 · 4.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #java #js #vue.js

vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细解释了在Vue.js中遇到的TypeError: Cannot read property 'name' of undefined等渲染错误的原因，并提供了三种有效的解决方法，包括使用v-if指令和模板包裹来避免在数据未加载完成前尝试访问未定义的属性。

vue界面显示Error in render: "TypeError: Cannot read property ‘name’ of undefined"等问题，虽然不影响界面显示，但是打开控制台一大片红实在不美观。
在这里插入图片描述
vue中使用{{}}文本插值方式，通过 . 级联显示内容。在级联展示时，如果三层级联，只能解析在data中定义也就是vue实例上的对象子一层的东西，对于孙一层的东西就被解析成不在vue实例上的。也就是报错的此属性不在vue实例上。

后端内容返回之前，控制台会Cannot read property ‘xxx’ of undefined的错误。

vue是异步请求。页面渲染刚开始的时候还没有拿到这个值，所以会报错。在vue中对该值进行if判断(v-if = " ")。当该对象有值的时候再进行渲染。

如下代码，enterprisedata[0]通过后端接口返回。

报错代码片段：

<detail-list>
    <detail-list-item term="客户名称">{{ enterprisedata[0].name }}</detail-list-item>
    <detail-list-item term="客户编号">{{ enterprisedata[0].id }}</detail-list-item>
    <detail-list-item term="客户电话">{{ enterprisedata[0].tel }}</detail-list-item>
    <detail-list-item term="客户地址">{{ enterprisedata[0].address }}</detail-list-item>
    <detail-list-item term="信用等级">{{ enterprisedata[0].credit_rate }}</detail-list-item>
    <detail-list-item term="行业分类">{{ enterprisedata[0].category }}</detail-list-item>
    <detail-list-item term="客户类别">{{ enterprisedata[0].pro_sort }}</detail-list-item>
    <!-- <detail-list-item term="客户状态">{{ enterprisedata [0].null }}</detail-list-item> -->
    <detail-list-item term="建档时间">{{ enterprisedata [0].create_date }}</detail-list-item>
</detail-list>

解决方法：
1.

<detail-list>
    <detail-list-item term="客户名称" v-if="enterprisedata[0].name">{{ enterprisedata[0].name }}</detail-list-item>
    <detail-list-item term="客户编号" v-if="enterprisedata[0].id">{{ enterprisedata[0].id }}</detail-list-item>
    <detail-list-item term="客户电话" v-if="enterprisedata[0].tel">{{ enterprisedata[0].tel }}</detail-list-item>
</detail-list>

<detail-list>
	<template v-if="enterprisedata[0]">
	  <detail-list-item term="客户名称">{{ enterprisedata[0].name }}</detail-list-item>
	  <detail-list-item term="客户编号">{{ enterprisedata[0].id }}</detail-list-item>
	  <detail-list-item term="客户电话">{{ enterprisedata[0].tel }}</detail-list-item>
	  <detail-list-item term="客户地址">{{ enterprisedata[0].address }}</detail-list-item>
	  <detail-list-item term="信用等级">{{ enterprisedata[0].credit_rate }}</detail-list-item>
	  <detail-list-item term="行业分类">{{ enterprisedata[0].category }}</detail-list-item>
	  <detail-list-item term="客户类别">{{ enterprisedata[0].pro_sort }}</detail-list-item>
	  <!-- <detail-list-item term="客户状态">{{ enterprisedata [0].null }}</detail-list-item> -->
	  <detail-list-item term="建档时间">{{ enterprisedata [0].create_date }}</detail-list-item>
	</template>
	</detail-list>

new Vue({
  enterprisedata[0]: {
    title: '',
    description : ''
  },
  created(){
    // 调用后端接口
  }
})