javascript - 无法加载 "props"数据

Question

在我的项目中，我从以下页面下载数据(在 Axios 的帮助下):

http://seo-gmbh.eu/json/api_sunds.php?action=init_data_for_index

数据用于我的主页。

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

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

但是在我的中心内容组件中，我无法获取此数据以将其显示到我的 HTML 代码中。

我可以像这样获取部分数据:dbIndex.data

但是如果我尝试像这样更深入地获取此 Prop 数据:dbIndex.data.init_data_for_index

显示以下错误:

Cannot read property 'init_data_for_index' of undefined.

我的问题是:

在我的情况下，我应该如何正确获取这些数据？

import LiServiceApp from '~/components/CenterContentIndexApp/LiServiceApp';
  export default {
    props: ['dbIndex'],
    components: {
      LiServiceApp,
    }
  }
}

<template>
 <section class="center_content_index">
    <ul class="ul_1">
        <li class="li_3">
          {{  dbIndex.data.init_data_for_index  }}
        </li>
    </ul>
    <!--  <ul class="ul_1"> end -->
  </section>
</template>

Answer 1

试试这个代码:

<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 是一个空数组，直到从 API 填充为止。