Как получить window.screen.width в computed при каждом изменении?

Question

У меня есть computed свойство которое отвечает за кол-во рядов для карточек. И это свойство должно возвращать кол-во рядов в зависимости от ширины окна, проблема в том, что это работает только 1 раз, при обновлении страницы, а мне нужно получать при каждом изменении ширины через девтулс даже на 1 px обновление computed свойства. Помогите решить задачку))

    countRanks() {
      const screenWidth = window.screen.width;
      console.log(screenWidth);
      if (screenWidth >= 992 && screenWidth < 1200) {
        return 3;
      }
      if (screenWidth >= 768 && screenWidth < 992) {
        return 2;
      }
      if (screenWidth > 0 && screenWidth < 768) {
        return 1;
      }
      return 4;
    },
  },

Срабатывает только 1 раз при обновлении;

<p>countRanks</p>

Если меняю ширину, значение не меняется, хотя должно вернуть 1

Answer 1

Можно так, используя метод debounce из lodash для уменьшения количества вызовов.

Импортируем lodash

import _ from 'lodash';

Добавляем в стейт свойство screenWidth которое будет хранить текущую ширину окна и которое будет использовано в countRanks

data() {
    return {
      screenWidth: window.screen.width
    }
},

далее добавляем слушателя на событие `resize` (не забывая его уничтожить при уничтожении компонента)

created() {
  window.addEventListener("resize", this.windowResize);
},
destroyed() {
  window.removeEventListener("resize", this.windowResize);
},

и добавляем функцию (метод) для слушателей

methods: {
  windowResize: _.debounce(function({target:{innerWidth: screenWidth }}) {
    this.screenWidth = screenWidth;
  }, 500)
},

ну и Ваш компютед метод countRanks

computed: {
  countRanks() {
    const screenWidth = this.screenWidth;
    console.log(screenWidth);
    if (screenWidth >= 992 && screenWidth < 1200) {
      return 3;
    }
    if (screenWidth >= 768 && screenWidth < 992) {
      return 2;
    }
    if (screenWidth > 0 && screenWidth < 768) {
      return 1;
    }
    return 4;
  },
}

Примечание: в таком виде метод windowResize можно использовать только для единичного использования компонентов, в которых он объявлен!!!

БЛОГ НА HUSL

Как получить window.screen.width в computed при каждом изменении?

Ответы (1 шт):