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

Question

[wiyod]

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

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())
  }
})

Comments

[wiyod]

MaxKorz, ну так попробуйте this.h - не работает

Answer 1

[0xD34F]

Во-первых - вы пытаетесь установить в качестве обработчика 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());
  },
});

Comments

[wiyod]

Да, я тоже пришел к этому, использую метод напрямую. Имхо, слишком жирно это пихать в data. Я заблуждаюсь? А с computed никак ивет листенер не прикрутить?

[0xD34F]

wiyod, думаю да, заблуждаетесь - чего такого жирного в одном числе?

С computed никак - значения вычисляемых свойств рассчитываются заново только в случае изменения зависимостей - данных, параметров, других вычисляемых свойств.

[wiyod]

0xD34F, нашел странный пример - https://forum.vuejs.org/t/vuejs-2-event-listener-w...

Фактически 1 в 1 мой вопрос. При этом, этот чувак позже пишет что все заработало - а я в упор не вижу что там заработало.

Answer 2

[fl3nkey]

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));
  }
});

Comments

[wiyod]

Мне кажется неподходящим класть это в data

[fl3nkey]

wiyod, что тогда по вашему должно быть в data?