0

В methods есть функция, внутри которой присваивается слушатель на window.matchMedia().

Если переходить между страницами, то слушатели умножаются.

Как в хуке beforeDestroy правильно удалить этого слушателя? Проблема в том, что нужно обращаться именно к тому объекту, и удалять именно ту функцию, которые объявлены совсем в другом месте.

beforeDestroy() {
    // Этот хук специально, чтобы уничтожать обработчики событий
    // Но я не понимаю, как мне удалить здесь нужные
    // this.$off() не работает
},
methods: {
    checkMedia() {
        let phone = window.matchMedia("(max-width: 599px)")
        const mediaHandler = () => {
        // Обработка в зависимости от ширины страницы
        }
        // Вызов обработчика, чтобы срабатывало при загрузке страницы
        mediaHandler()
        // Слушаем событие change
        // Именно его мне нужно удалить в хуке beforeDestroy
        phone.addListener(mediaHandler)
    }

}
2
  • Код?................
    – Dmytro
    Commented 10 сент. 2019 в 19:23
  • @Дмытрык добавил.
    – Andrew
    Commented 10 сент. 2019 в 19:57

1 ответ 1

1
        data(){
          return{
            phone: null,
          }
        },
        methods: {
          checkMedia() {
             this.phone = window.matchMedia("(max-width: 599px)")      
             this.phone.addListener(this.mediaHandler)
          },
          mediaHandler(){
            console.log(123)
          }
        },
        beforeDestroy(){
          this.phone.removeListener(this.mediaHandler)
        }
1
  • Большое спасибо. Об использовании data для данной цели совершенно не подумал
    – Andrew
    Commented 11 сент. 2019 в 6:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.