Как правильно использовать этот watch во Vue.js для управления модальными окнами, зависящими от свойств isModalAddVisible и activeId?
1. Для отключения прокрутки страницы при открытии модального окна через Vue watch можно использовать следующий подход:
```
watch: {
isModalAddVisible(value) {
if (value) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
}
}
```
2. Чтобы правильно использовать watch в Vue.js для управления модальными окнами, зависящими от свойств isModalAddVisible и activeId, можно сделать следующее:
```
watch: {
isModalAddVisible(value) {
if (value) {
this.openModal(this.activeId);
} else {
this.closeModal();
}
},
activeId(newValue, oldValue) {
if (newValue !== oldValue) {
this.openModal(newValue);
}
}
},
methods: {
openModal(id) {
// Логика открытия модального окна с id
},
closeModal() {
// Логика закрытия модального окна
}
}
```
В данном случае, при изменении значения isModalAddVisible на true, будет вызываться метод openModal(id) с текущим значением activeId. При изменении activeId также будет вызван метод openModal(id) с новым значением.
export default { data() { return { isModalAddVisible: false, activeId: null, }; }, watch: { isModalAddVisible(newValue) { if (newValue || this.activeId) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'auto'; } }, activeId(newValue) { if (this.isModalAddVisible || newValue) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'auto'; } }, }, };
Только не забудь удостовериться, что isModalAddVisible и activeId являются реактивными свойствами в компоненте. Иначе работать не будет