Javascript Can'；t荷载“；道具；数据

在我的项目中，我从以下页面下载数据（在Axios的帮助下）：

这些数据在我的主页中使用

之后，我尝试通过“道具”将这些数据传递到我的中心内容组件

我的Vue调试器向我显示它已正确完成：

但在我的中心内容组件中，我无法将这些数据显示在HTML代码中

我可以得到如下部分数据：

dbIndex.data

但是，如果我尝试像这样更深入地获取这些道具数据：

dbIndex.data.init\u data\u for\u index

将显示以下错误：

无法读取未定义的属性“init_data_for_index”

我的问题是: 在我的案例中，如何正确获取这些数据

从“~/components/CenterContentIndexApp/LiServiceApp”导入LiServiceApp；
导出默认值{
道具：['dbIndex']，
组成部分：{
LiServiceApp，
}
}
}

{{dbIndex.data.init_data_for_index}

尝试以下代码：

<li class="li_3">
  {{ init_data_for_index }}
</li>


...


computed() {

  init_data_for_index() {
    return this.dbIndex && this.dbIndex.data && this.dbIndex.data.init_data_for_index
      ? this.dbIndex.data.init_data_for_index
      : [];
  },

},

{{init_data_for_index}}

...
计算（）{
索引（）的初始化数据{
返回this.dbIndex&&this.dbIndex.data&&this.dbIndex.data.init\u data\u作为索引
？this.dbIndex.data.init_data_for_index
: [];
},
},

---

因此，在从API填充之前，索引的初始

init\u data\u是一个空数组。
可以显示父组件的片段吗？听起来像是一个异步问题。组件正在尝试在axios调用填充
dbIndex.data
之前进行渲染，因此
dbIndex.data
未定义。您可以尝试一个名为
dataForIndex
的计算属性，该属性检查
if（！dbIndex.data）{return null}return dbIndex.data.init_data_for_index；}
并直接在模板中返回计算属性的名称而不是prop，否则另一种解决方案是在数据加载
v-if
之前不渲染组件。例如，在执行axios调用时，将数据响应分配给Vue实例后，可以在解析承诺后将属性
loaded
设置为false。这将减少每次在组件中需要此道具时计算的属性。这是我的父组件。请看一下：