@wiyod

Почему не работает addEventListener 'resize'?

Почему не получается менять значения при ресайзе?

https://codepen.io/kode88/pen/VQEEyy

new Vue({
  el: '#app',
  methods: {
    h () {
      let h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
      return h
    }
  },
  computed: {
    calcViewportHeight () {
       return this.h()
    }
  },
  created: {
    window.addEventListener('resize', this.h())
  }
})
  • Вопрос задан
  • 1845 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Во-первых - вы пытаетесь установить в качестве обработчика resize не метод, а результат его выполнения. Во-вторых - честно говоря, затрудняюсь понять, на что вы рассчитывали, как бы вы ни дёргали метод расчёта высоты, что от этого измениться для computed? Да ничего. Класть результат в data вам уже советовали, и даже показали рабочий пример - тут я ничего добавлять не буду (кроме того, что лично я - всё-таки результат в data бы положил). Если вам кровь из носу надо без хранения результата, то... ну, вот говнокод:

<div id="app">
  <h1>{{ h() }}</h1>
</div>

new Vue({
  el: '#app',
  methods: {
    h() {
      return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    },
  },
  created() {
    window.addEventListener('resize', () => this.$forceUpdate());
  },
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
FLUNKEY
@FLUNKEY
самовар
window.addEventListener('resize', this.h.bind(this));

или
window.addEventListener('resize', () => this.h());

А лучше
new Vue({
  el: '#app',
  data: {
    h: 0
  },
  methods: {
    calcH() {
      this.h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    }
  },
  created() {
    this.calcH();
    window.addEventListener('resize', this.calcH.bind(this));
  }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы