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重置变量竞争条件

1 个答案: