0

У меня есть 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 введите сюда описание изображения

1
  • window.addEventListener('resize', countRanks);
    – Leonid
    4 дек 2021 в 13:55

1 ответ 1

0

Можно так, используя метод 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 можно использовать только для единичного использования компонентов, в которых он объявлен!!!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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