Question

我正在尝试在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
    })
  })
}

由于这是一项测试，我也希望他们能够使用下一个或上一个按钮浏览问题。因此，我使用了计算属性来操纵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打印出2个值：第一个是错误，而第二个是问题数组的实际长度。这意味着在可以检索数组的长度之前会稍有延迟。所以我用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)
}

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

这可能是什么原因？

Answer 1

在调用var archPath = $"{AppDomain.CurrentDomain.BaseDirectory}{Environment.Is64BitProcess ? "x64" : "x86"}\\"; var pathVariable = Environment.GetEnvironmentVariable("PATH"); pathVariable = $"{archPath};{pathVariable}"; Environment.SetEnvironmentVariable("PATH", pathVariable);中的回调之前，已创建并准备好组件。如果不是，那么next()不会有任何效果。因此，在vm.testData = response.data期间首先调用paginatedData，然后在this.testData === null || undefined || whatever回调中更新testData时再次调用它。

您可以在next()中使用像if (!this.testData) return null这样的简单支票来规避。

This thread详细介绍了问题。

vue js计算属性中的轻微延迟

1 个答案: