Javascript 异步JS调用输出良好，但给出一个'；未定义'；错误

我正在与异步调用作斗争，我意识到这个问题以前已经被回答过很多次了，但我尝试过许多建议的方法，但都没有成功，因此如果有人能帮助我，我将不胜感激。我也想指出，我最近取得了很大的进步，但我认为自己是初学者。 我有一个对数据库的异步调用（在controller.js文件中），该数据库应返回“games”表中的所有游戏，并将其存储在数组类型的“allGames”变量中：

async getAllGames ({ request, response }) {
  const allGames = await Game.all()
  return response.json({
    status: 'success',
    data: allGames
  })
}

加载页面时，将执行函数fetchAllGames：

created () {
  this.fetchAllGames(this.myCallback)
},
methods: {
  myCallback (response) {
    this.allGames = response
  },
  fetchAllGames (callback) {
    axios
      .get('/fetch_games')
      .then(response => {
        callback(response.data.data)
      })
  }
}

一切似乎都很好，在这里我应该注意到我使用的是VueJS

当我尝试使用

{{allGames}}

它按预期工作，显示数据库中所有游戏的数组

如果我尝试

{{所有游戏[1]}

我得到了第二场比赛，也和预期的一样

如果我尝试

{{allGames[1].id}

我得到了第二个游戏的身份证。现在，如果我手动重新加载页面，即使该ID仍然显示在页面上，我会

[Vue warn]：渲染中出错：“TypeError:\u vm.allGames[1]未定义”

在控制台中

我的问题是我需要将“allGames”传递给另一个组件，而现在我正在传递“undefined”

---

我真的很感激你们中的任何人能给我一些启示。我已经挣扎了一段时间，尝试了许多不同的方法。我在不同的组件中有相同的代码，它似乎工作得很好。我确信我遗漏了一些东西。

如果使用

{allGames[1].id}

VueJS会立即尝试呈现第一个元素的id，该元素在最初呈现页面时还不存在，因为数据仍在后台加载

您需要使用

v-for

指令或保护呈现

{{if allGames.length？allGames[1]。id:''}}

---

关于热重新加载：热重新加载的工作方式不同于刷新页面。我不是专家，但我认为当站点的某些部分被热重新加载时，VueJS数据没有得到正确的清除

我想你的意思是

v-if

指令。我尝试使用

v-if=“allGames.length”

并获得了相同的结果。尝试

{{allGames.length？allGames[1]。id:'}}}

并再次获得完全相同的结果。否。我假设这是一个数组，您希望遍历它。可能尝试

{{allGames.length>1？allGames[1]。id:''}}

，因为您尝试访问第二个元素。此外，如果在呈现页面时仍在加载数据，如何打印数组？我的意思是，即使

allGames[1].id

打印得很好，但我得到了错误消息，数据作为

undefined

发送到子组件。我也不明白为什么当我使用

allGames[1]

时它不会抛出错误，而当我使用

allGames[1].id

时它会抛出错误，但是说

allGames[1]

是未定义的（没有

id

）。好吧，根据你上次的建议，我得到了一些不同的东西：这次我仍然得到了相同的错误，但数据传递是正确的。