[已解决]“TypeError: Cannot read property ‘xxx‘ of undefined“报错情况分析

这句话直译过来就是：TypeError：无法读取未定义的属性“ xxx”

首先去看看属性 ‘xxx’ 有没有定义。没定义的根据实际需求在data中或者方法中定义一下。

1、如果在data中定义了，先看看你的data写对了没，我有一次手误打成了 date ，检查了一下午才看出来o(╥﹏╥)o

2、如果这个数据“xxx”是从后台异步获取的，那就最好在data中先给他个默认值
比如，

data() {
   return {
      obj1: '',
      obj2: null.
      obj3: {},
      obj4: []
   }
}
mounted(){
    // 获取后台数据给obj们赋值等等各种异步操作
}

或者 当“xxx”是一个嵌套两层的结构 obj.name

data() {
   return {
      obj: {
      	name: '',
      	age: null,
      }
   }
}

但是，当“xxx”是一个嵌套了多层的结构 obj.name.firstName，或者结构很复杂，那就不建议使用这种“占位”的方法。可以在模板中用 v-if 命令判断该值是否存在
比如：

//bad
<template>
  <div>{{ obj.name.firstName}}</div>
  <div>{{ obj.age}}</div>
</template>

// good
<template>
  <div v-if="foo.name && foo.title.firstName">{{ age.name.firstName}}</div>
  <div v-if="foo.age">{{ age.age}}</div>
</template>

注意要用 v-if ，不能用 v-show

页面初始化的时候，数据是从data中拿的，你都没在data中定义他，他可不得报错嘛。又因为程序的执行是很快的，拿到数据赋值之后触发页面更新，就能显示了。这就是为啥有时候报了这个错，但是页面中依然能显示“xxx”的值。