Question

我正在努力应对异步调用，我意识到这个问题之前已经多次得到解答，但是我已经尝试了很多建议的方法并且没有成功，所以如果有人能帮助我，我真的很感激。我还想指出，我最近取得了很大的进步，但我认为自己是初学者。

我对数据库（在controller.js文件中）进行异步调用，该数据库应从“游戏”表中返回所有游戏并将其存储在Array类型的“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'时

{{allGames}}

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

如果我尝试

{{allGames [1]}}

我得到了第二场比赛，也是如预期的那样。

如果我尝试

{{allGames [1] .id}}

我通过热重装获得了第二个游戏的ID。现在，如果我手动重新加载页面，即使ID仍然显示在页面上，我也会得到

[Vue警告]：渲染错误：“TypeError：_vm.allGames [1]未定义”

在控制台中。

我的问题是我需要将'allGames'传递给另一个Component，现在我传递'undefined'。

如果你们中的任何一个人能给我一些启示，我真的很感激。我已经苦苦挣扎了一段时间，并尝试了许多不同的方法。我在不同的组件中有相同的代码，它似乎工作正常。我确定我错过了什么。

Answer 1

如果您使用{{ allGames[1].id }} VueJS会立即尝试渲染第一个元素的ID，这在您最初渲染页面时尚不存在，因为数据仍在后台加载。

您需要使用v-for指令或保护渲染{{ if allGames.length ? allGames[1].id : '' }}

关于热重新加载：热重新加载的工作方式与刷新页面的方式不同。我不是专家，但我会假设当部分网站热重新加载时，VueJS数据没有得到正确清理

异步JS调用打印正常，但给出“未定义”错误

1 个答案: