vue 报错：Cannot read property 'xxx' of undefined"，但是页面能渲染上数据

有时候会遇到给页面绑定数据的时候，可以绑定成功，但vue warn:xxx属性of undefined，，，如果本组件只是绑定简单的数据倒是可以忽略，如果本组件还引入了其他组件或第三方组件，插件，则就渲染不出来，就需要解决了，

<template>
    ...
    <span>{{data.xxx.xx}}</span>
    ...
</template>

<script>
export default {
  data () {
    return {
      data: {
      	xxxx:""
      }
    };
  },
  methods: {
   .....请求到数据赋给data.xxxx;
  }
  created () {
    this.getData();
  }
};
</script>  

页面上能渲染成功，但是vue仍然警告数据属性undefined，，
因为是异步请求，页面渲染刚开始的时候还没有拿到这个值，所以会报错。你需要在节点上用if判断一下，在有数据的时候再进行渲染。

<template>
    ...
    <span v-if="data.xxx&& data.xxx.xx">{{data.xxx.xx}}</span>
    ...
</template>

或者你在声明data的时候，将里面的字段也一并声明出来,往下多声明一下数据。

参考https://www.cnblogs.com/huancheng/p/9188287.html

---

2019.11.15 更新

在详解vue父组件传递props异步数据到子组件的问题文章里有多种解决方案：传送门