Для создания зависимых полей в 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' обязательно!