Vue 重置变量竞争条件

Question

我正在创建一个应用程序，您可以在其中填写您的空闲时间。您可以按月完成此操作。每次您更改月份和更改内容时，应用程序都会询问您是否要保存更改。

这是完整文件https://pastebin.com/6FTuPhrV，但我会尝试更详细地解释问题。

更改月份时我会清除天数数组：

getDays () {
  // Clear days so it can be refilled
  this.days = []

  // Month and year for the days
  const month = this.currentDate.month()
  const year = this.currentDate.year()

  const names = Object.freeze(
    ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'])
  const date = new Date(year, month, 1)
  let fullDate = ''

  while (date.getMonth() === month) {
    fullDate = date.getDate() + '-' + month + '-' + year
    this.days.push({ 
      day: date.getDate(), 
      name: names[date.getDay()], 
      fullDate: fullDate
    })
    date.setDate(date.getDate() + 1)
  }

但是，正如您在这张图片中看到的那样，当更改月份时，这些值不会重置

November days December days

但是当我在设置日期的函数上设置超时时它确实有效:

getDays () {
  // Clear days so it can be refilled
  this.days = []

  // Month and year for the days
  const month = this.currentDate.month()
  const year = this.currentDate.year()

  const names = Object.freeze(
    ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'])
  const date = new Date(year, month, 1)
  let fullDate = ''

  setTimeout(() => {
    while (date.getMonth() === month) {
      fullDate = date.getDate() + '-' + month + '-' + year
      this.days.push({
        day: date.getDate(),
        name: names[date.getDay()],
        fullDate: fullDate
      })
      date.setDate(date.getDate() + 1)
    }
  }, 500)
}

如这些图片所示，它现在可以正确地重置日期的时间：

November days December days correctly reset.

当然它现在可以工作了，但我不想在我的代码中出现竞争条件并让用户等待。

你们有遇到过同样的问题吗？你是怎么解决的？

Answer 1

您可以使用 this.$nextTick([callback, context]).
而不是超时在下一个 DOM 更新周期后执行的回调。
只需将您的 while 循环放在回调中。

更多信息在这里： https://vuejs.org/v2/api/#Vue-nextTick

Vue 重置变量竞争条件

Vue resetting variables race condition

javascript

ecmascript-6

vue.js

vuejs2

nuxt.js