将数据文件从静态文件（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>

我可以从控制台日志中看到，当从数据库访问时，这个. portfolio [0].portfolioInfo.portfolioTitle具有正确的值，但是当试图在模板中呈现该值时，出现了一个错误。
由于这在我从静态文件定义投资组合时起作用，所以我处理数据的方式有问题，但目前还不知道是什么问题。
如果我注解掉数据库访问并通过导入引入数据，一切都会正常工作。