In VueJS, is there a way to make your binded styling react to the size change of the screen?

Question

I have a div that is conditionally binded to a class in vueJS. The formula for my computed variable uses Screen.width. It seems to work correctly when first loading, but if I change the size of the screen it doesn't rebind with the new screen size, unless I refresh the page. Is there a way I can get my conditionally binding to honor the change in screen?

<div class="div_1" v-bind:class="{ horizontalScroll : showScroll }"/>

showScroll(){
       return this.events.length*225>(screen.width*.84);
}

Answer 1

If you wanna do it this way, you will probably have to register a 'resize' listener. Your code should look something like this:

data: () => ({
    windowWidth: document.documentElement.clientWidth,
    windowHeight: document.documentElement.clientHeight
}),

mounted() {
    window.addEventListener('resize', this.setDimensions);
},

methods: {
    setDimensions() {
        this.windowWidth = document.documentElement.clientWidth;
        this.windowHeight = document.documentElement.clientHeight;
    },
}

and don't forget to remove it:

beforeDestroy() {
    window.removeEventListener('resize', this.setDimensions);
},