未处理的 Promise 拒绝：TypeError：undefined 不是 Vue 中的 object（正在评估 '_ctx.portfolios[0].portfolioInfo'）

Question

将数据文件从 static 文件 (portfolio.json) 更改为 db 后出现此错误。

<template>
  <section class="home-sect">
    <ul>
      <li>
        <label for="portTitle"> Portfolio Title linked to:</label>
        <input
          type="text" name="portTitle" id="portTitle"
          :value="portfolios[0].portfolioInfo.portfolioTitle"
        />
      </li>
      <li>
        <label for="portLink"> Portfolio Number Being linked:</label>
        <input
          type="text" name="portLink" id="portLink"
          :value="portfolios[0].portfolioInfo.portfolioLink"
        />
      </li>
      <li>
        <label for="siteFooter"> Site Footer:</label>
        <input
          type="text" name="siteFooter" id="siteFooter"
          :value="portfolios[0].portfolioInfo.siteFooter"
        />
      </li>
      <li>
        <label for="heroTitle"> Title of hero image:</label>
        <input
          type="text" name="heroTitle" id="heroTitle"
          :value="portfolios[0].portfolioPics[0].thumbnail.title"
        />
      </li>
      <li>
        Url of hero image
        <input
          type="text" name="" id=""
          :value="portfolios[0].portfolioPics[0].thumbnail.image"
        /><img src="" alt="" />
      </li>
    </ul>
  </section>
</template>

<script lang="js">

// import portfolios from "../assets/portfolio.json";
import axios from "axios";

export default {
  name: "EditHome",
  data() {
    return {
      portfolios: [],
    };
  },
  async created() {
    try {
      const result = await axios.get(`http://localhost:3010/portfolios`);
      const data = result.data;
      this.portfolios = data;
      console.log("EditHome portfolios[0] title ", this.portfolios[0].portfolioInfo.portfolioTitle);
    } catch(e) {
      console.error(e)
    }
    // this.portfolios = portfolios;
  },
};
</script>

我可以从控制台日志中看到 this.portfolios[0].portfolioInfo.portfolioTitle 在从 db 访问时具有正确的值，但是在尝试在模板中呈现该值时出现错误。

由于这在我从 static 文件定义投资组合时起作用，所以我处理数据的方式有问题，但目前无法确定是什么。

如果我注释掉数据库访问并通过导入导入数据，一切正常。

Answer 1

我可以从控制台日志中看到 this.portfolios[0].portfolioInfo.portfolioTitle 在从 db 访问时具有正确的值，但那是因为它在异步等待中。 在异步等待完成之前组件正在呈现。

添加在创建的 function 中管理的 isLoaded 变量并向该部分添加 v-if 解决了问题。

谢谢@Moritz Ringler