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>

2.

<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>

3.

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