Как изменить на вью 3?

Question

[oksanatkachik094]

проблема в последней строчке

mounted() {
  const mql = matchMedia('(max-width: 768px)');
  const onChange = () => this.handle = mql.matches ? '.image' : null;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

Answer 1

[0xD34F]

Сделать mql свойством компонента, onChange методом, снятие обработчика выполнять в beforeUnmount.

Ну или переписывайте с использованием composition api.

Comments

[oksanatkachik094]

0xD34F, так и пробую
но не работает. Ошибок в консоли нет

data() {
    return {
      handle: null,
        mql: matchMedia('(max-width: 768px)');
    }
  },
  methods: {
      onChange: function(event) {
        this.handle = this.mql.matches ? '.image' : null;
      }
    },
    mounted() {
      this.onChange();
      this.mql.addEventListener('change', this.onChange);
    },
    beforeUnmount() {
      this.mql.removedEventListener('change', this.onChange);
    }

[0xD34F]

return () {

Ошибок в консоли нет

Охотно верю.

Предлагаю вам отправится на фриланс, и заказать решение там. Или попробуйте js освоить.

[oksanatkachik094]

0xD34F, обновила выше код
просто переписала его вручную после удаления

[oksanatkachik094]

0xD34F, Ошибок в консоли нет

[0xD34F]

oksanatkachik094, сильно лучше не стало. Предложение из моего предыдущего комментария остаётся в силе.

[oksanatkachik094]

0xD34F, так а что не так? вроде ж по аналогии делаю

[oksanatkachik094]

0xD34F, ошибок то нет

[0xD34F]

oksanatkachik094, опять врёте. Есть.

[oksanatkachik094]

0xD34F, проверила - нет ошибки

data() {
    return {
      handle: null,
        mql: matchMedia('(max-width: 768px)')
    }
  },
  methods: {
      onChange: function(event) {
        this.handle = this.mql.matches ? '.image' : null;
      }
    },
    mounted() {
      this.onChange();
      this.mql.addEventListener('change', this.onChange);
    },
    beforeUnmount() {
      this.mql.removedEventListener('change', this.onChange);
    }

[0xD34F]

oksanatkachik094, дальше что?

[oksanatkachik094]

0xD34F, ошибок нет, но не работает на 3 версии вью

[0xD34F]

oksanatkachik094, а у меня работает. У вас не работает - значит какие-то косяки всё ещё есть. Ищите.

[oksanatkachik094]

0xD34F, как работает?
без пропса:handle="handle" не хочет

[0xD34F]

oksanatkachik094, вот это новость (нет).