vueがエラーを報告します。Cannot read property 'xxx' of undefined", but the page renders the data

時々、あなたがページにデータをバインドするとき、あなたはそれを正常にバインドすることができますが、ビューの警告：未定義のxxx属性は、コンポーネントのみバインド単純なデータは無視することができる場合、コンポーネントも他のコンポーネントやサードパーティ製のコンポーネント、プラグインを導入する場合は、それがレンダリングされない、あなたは解決する必要があります。

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

<script>
export default {
  data () {
    return {
      data: {
      	xxxx:""
      }
    };
  },
  methods: {
   ..... The requested data is assigned to data.xxxx;
  }
  created () {
    this.getData();
  }
};
</script>  

ページは正常にレンダリングされますが、vue はまだ data プロパティが未定義であることを警告しています。
非同期リクエストであるため、ページのレンダリングが最初に開始されたときにはまだ値がないため、エラーが報告されるのです。ノードに対してif判定を行い、データが利用可能になった時点でレンダリングする必要があります。

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

あるいは、その中のフィールドをデータと一緒に、もう少し下の方に宣言することもできます。

https://www.cnblogs.com/huancheng/p/9188287.html をご参照ください。

2019.11.15更新

vueの親コンポーネントから子コンポーネントにpropsの非同期データを渡す問題には、複数の解決策があり、記事の詳細では 通過ゲート