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

by

0👍

✅

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);
},

Leave a comment