Javascript vue js计算属性中存在轻微延迟

我正在尝试用Vue和Laravel建立一个考试系统。一旦用户输入了测试代码和电子邮件地址，他们就会被带到页面进行测试，因此使用测试代码，我会使用如下导航栏拉入所有测试问题：

beforeRouteEnter (to, from, next) {
  axios.post('api/questions',{
    code: to.params.testcode
  })
  .then(response => {
    next(vm => {
      vm.testData = response.data //load testData object here
    })
  })
}

由于这是一项测试，我也希望他们能够使用“下一步”或“上一步”按钮浏览问题。因此，我使用computed属性来操作

testData.questions

，因此每次返回1个问题：

paginatedData () {
  const start = this.pageNumber * this.size,
        end   = start + this.size;
  console.log(this.testData.questions.length)

  // return this.testData.questions.slice(start, end)
}

这里发生了一些奇怪的事情：

console.log

打印出两个值：第一个是错误，第二个是问题数组的实际长度。这意味着在检索数组长度之前会有一点延迟。因此，我使用

setTimeout

尝试延迟

console.log

以查看发生了什么：

paginatedData () {
  const start = this.pageNumber * this.size,
        end   =  start + this.size;

  setTimeout(() => {
    console.log(this.testData.questions.length)
  }, 1000);

  // return this.testData.questions.slice(start, end)
}

现在结果只是一个值（数组长度），不会打印错误

---

原因可能是什么？

在调用

next（）

中的回调之前，将创建并准备好组件。如果不是，那么

vm.testData=response.data

就不会有任何效果。因此，当

this.testData==null | | | undefined | | | which

时，首先调用

paginatedData

，然后在

next（）

回调中更新

testData

时，再次调用它

您可以在

paginatedData

中使用一个简单的检查，如

if（！this.testData）返回null

，以规避此问题

---

详细说明问题。

什么没有？您是否将

if（！this.testData）返回null

放在

paginatedData

方法的开头？如果是，则在未设置

testData

时，代码不应到达console语句。当然，如果

testData

有一个预设值，它不会使

！此.testData

equal

false

（如非零数字、非空字符串或数组或对象）则检查不起作用。另外，您还需要取消对return语句的注释，因为我相信如果计算属性不返回值，Vue会给出错误。它成功了！！！太棒了，我已经在考虑使用Promissions来实现这一点了，非常感谢您的详细解释和回答，或者定义“testdata”，包括正确的结构，但在组件的数据属性中使用空值。这将被您自己的数据覆盖，如上所述。额外好处：您已经清楚地概述了您的数据结构，这可能会很有用。此外，testsdata.questions（以及您定义的其他道具）现在是被动的