Как отслеживать ширину экрана Vue?

Question

[danilr]

Есть вычисляемое свойство, значение которое должно исходить из ширины экрана. Вопрос в том, как мне постоянно отслеживать это значение.

isOpenAllFiltersWith(){
      if(document.documentElement.clientWidth <= 500){
        return true
      }
      else return this.isOpenAllFilters
    },

При первой загрузке оно выполняется правильно, но если изменяешь размер окна - то уже свойство не пересчитывается. Как это исправить?

Answer 1

[0xD34F]

Добавьте в компонент свойство, которое будет содержать ширину экрана; при создании экземпляра компонента подписывайтесь на события изменения размеров экрана, в обработчике обновляйте свойство компонента:

data: () => ({
  width: 0,
}),
created() {
  const onResize = () => this.width = window.innerWidth;
  onResize();
  window.addEventListener('resize', onResize);
  this.$on('hook:beforeDestroy', () => window.removeEventListener('resize', onResize));
},

https://jsfiddle.net/ma367d5w/

Это если, как вы сказали, "постоянно отслеживать". Но судя по показанному коду, вам надо несколько иное - знать, как ширина экрана соотносится с определённым значением, больше/меньше. Так что отслеживать все изменения ширины необходимости нет:

data: () => ({
  isWidthOK: false,
}),
created() {
  const mql = window.matchMedia('(max-width: 600px)');
  const onChange = () => this.isWidthOK = mql.matches;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

https://jsfiddle.net/ma367d5w/1/

Answer 2

[Владимир Проскурин]

Есть событие onresize
Слушаете его в своем компоненте. и при срабатывании выполняйте нужный метод.

Comments

[danilr]

Я знаю такое событие, вопрос куда его вешать, мне же нужно знать ширину самого окна. И также вопрос в том, что я использую вычисляемое свойство, как делать чтобы он пересчитывался при resize? (P.s. как это записать)

[Владимир Проскурин]

danilr, так поместите обработку события в created, а в обработчике меняйте переменную в data, тогда не нужно будет вычисляемое свойство.

Answer 3

[WapSter]

Пример кода по использованию события resize, надеюсь вы достаточно знаете js, тобы применить свой код.

Answer 4

[Антон Швец]

window.addEventListener('resize' , () => {
  this.sizeX = document.documentElement.clientWidth;
})

Answer 5

[Владимир]

https://developer.mozilla.org/ru/docs/Web/API/Docu...