Битрикс

Созависимые поля во Vue

Для создания зависимых полей в Vue.js, где изменение одного поля (например, даты) влияет на другое (например, число, обозначающее количество лет), и наоборот, можно использовать вычисляемые свойства и наблюдатели.


export default {
  data() {
    return {
      years: 0,
      date: this.formatDate(new Date()),
      updating: false  // переменная для отслеживания внутренних обновлений
    };
  },
  watch: {
    years: {
      handler(newYears) {
        if (!this.updating) {
          this.updating = true;
          this.updateDateFromYears(newYears);
          this. updating = false;
        }
      },
      flush: 'sync'
    },
    date: {
      handler(newDate) {
        if (!this.updating) {
          this.updating = true;
          this.updateYearsFromDate(newDate);
          this.updating = false;
        }
      },
      flush: 'sync'
    }
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    updateDateFromYears(years) {
      const currentDate = new Date();
      currentDate.setFullYear(currentDate.getFullYear() + Number(years));
      this.date = this.formatDate(currentDate);
    },
    updateYearsFromDate(dateString) {
      const currentDate = new Date();
      const selectedDate = new Date(dateString);
      const differenceInYears = selectedDate.getFullYear() - currentDate.getFullYear();
      this.years = differenceInYears;
    }
  }
};

Перед обновлением другого поля проверяем флаг updating. Если он уже установлен в true, это означает, что обновление уже выполняется, и мы не должны запускать повторное обновление. Устанавливаем флаг updating в true перед началом обновления и сбрасываем его обратно в false после завершения обновления.

НО! это будет работать только в синхронном режиме. Для этого устанавливаем flush: 'sync'  обязательно!


Возврат к списку