Javascript Vue.js API获取

我是一名学生，我刚刚开始使用Vue。我正在制作一个显示火车信息的应用程序，但是当我从API获取项目时，它没有显示任何数据。它也没有在控制台中给出任何错误

main.js：

HTML:

API:

“我的网络”选项卡的屏幕截图：

---

API返回的对象如下所示：

{
  description: "Feed met alle treinstoringen en werkzaamheden op het Nederlandse spoornet."
  home_page_url: "https://www.rijdendetreinen.nl/"
  items: [{
    id: "disruption-24194-nl",
    title: "Amsterdam-Gouda: werkzaamheden elders",
    …
  }, …]
  title: "Rijden de Treinen"
  version: "https://jsonfeed.org/version/1"
}

我认为您实际上想要迭代对象的items属性，在这种情况下，您的v-for应该是：

<div v-for="(trein, i) in treinen.items">

现在，您原来的v-for in将按原样工作，因为treinen包含预期的项目

---

您能提供开发人员控制台的“网络”选项卡的屏幕截图吗？另外，我认为你应该在你的v-for:v-for=trein，I-in-treinen中用括号括起来。您还可以尝试记录提取的每个步骤。括号也不起任何作用。我还提供了我的网络标签的屏幕截图，希望你能看到哪里出了问题。

{
  description: "Feed met alle treinstoringen en werkzaamheden op het Nederlandse spoornet."
  home_page_url: "https://www.rijdendetreinen.nl/"
  items: [{
    id: "disruption-24194-nl",
    title: "Amsterdam-Gouda: werkzaamheden elders",
    …
  }, …]
  title: "Rijden de Treinen"
  version: "https://jsonfeed.org/version/1"
}

<div v-for="(trein, i) in treinen.items">

fetch(...)
    .then(response => response.json())
    .then(({ items }) => { // <-- destructuring items
      this.treinen = items;
    });