未處理的 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