“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”的值。