Каким способом можно отключить прокрутку страницы при открытии модального окна через vue watch?

Как правильно использовать этот watch во Vue.js для управления модальными окнами, зависящими от свойств isModalAddVisible и activeId?
  • 24 февраля 2024 г. 20:48
Ответы на вопрос 2
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 являются реактивными свойствами в компоненте. Иначе работать не будет
Похожие вопросы