Vue Сброс переменных состояния гонки

1

Я создаю приложение, в котором вы можете заполнить свою доступность. Вы можете сделать это к месяцу. Каждый раз, когда вы меняете месяц, и вы что-то изменили, приложение спросит, хотите ли вы сохранить свои изменения.

Это полный файл https://pastebin.com/6FTuPhrV, но я попытаюсь объяснить проблему более подробно.

Когда меняю месяцы, я очищаю массив 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 = ''

  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)
  }

Но тогда значения не сбрасываются при смене месяцев, как вы можете видеть на этом изображении

Ноябрьские дни Декабрьские дни

Но он работает, когда я помещаю тайм-аут на функцию, которая устанавливает дни:

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)
}

Как видно из этих изображений, теперь он правильно сбрасывает время в дни:

Ноябрьские дни Декабрьские дни правильно сброшены.

Конечно, теперь это работает, но я не хочу участвовать в гонке в своем коде и позволяю пользователю ждать.

Кто-нибудь из вас испытал ту же проблему? Как вы его решили?

Теги:
ecmascript-6
vue.js
vuejs2
nuxt.js

1 ответ

0
Лучший ответ

Вместо таймаута вы можете использовать this.$nextTick([callback, context]).
Обратный вызов, который выполняется после следующего цикла обновления DOM.
Просто разместите цикл while внутри обратного вызова.

Подробнее здесь: https://vuejs.org/v2/api/#Vue-nextTick

Ещё вопросы

Сообщество Overcoder
Наверх
Меню