无法加载“道具”数据答案

【问题标题】：Can't load "props" data无法加载“道具”数据
【发布时间】：2020-01-09 08:35:39
【问题描述】：

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

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

数据在我的主页中使用。

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

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

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

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

但如果我尝试像这样更深入地获取这些道具数据：dbIndex.data.init_data_for_index

显示如下错误：

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

我的问题是：

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

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>

【问题讨论】：

可以显示父组件的 sn-p 吗？
这听起来像是一个异步问题。您的组件试图在您的 axios 调用填充 dbIndex.data 之前渲染，因此 dbIndex.data 未定义。您可以尝试一个名为 dataForIndex 的计算属性来检查 if (!dbIndex.data) { return null } return dbIndex.data.init_data_for_index; }，然后直接在模板中返回计算属性的名称而不是 prop
或者另一种解决方案是在使用v-if 加载数据之前不渲染组件。例如，当您进行 axios 调用时，在将数据响应分配给您的 Vue 实例后，您可以在 promise 解决后将属性 loaded 设置为 false。每次您在组件中需要此道具时，这将减少计算属性。
jsfiddle.net/Mike_kharkov/v2fn8cz6/4 那是我的父组件。
看看这个：jsfiddle.net/qmheouwp

标签： javascript node.js vue.js nuxt.js

【解决方案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
      : [];
  },

},

所以在从 API 填充之前，init_data_for_index 最初是一个空数组。

【讨论】：