How to keep track of Vue screen width?

Question

Vue.js

There is a computed property whose value must come from the width of the screen. The question is how do I keep track of this value at all times.

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

On the first load, it runs correctly, but if you resize the window, then the property is not recalculated. How to fix it?

Answer 1

Add a property to the component that will contain the screen width:

data: () => ({
  width: 0,
  ...
}),

And the method that will update this property:

methods: {
  updateWidth() {
    this.width = window.innerWidth;
  },
  ...
},

When instantiating a component, subscribe to screen size changes:

created() {
  window.addEventListener('resize', this.updateWidth);
},

https://jsfiddle.net/yhu9qr1k/

Answer 2

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