Our project uses class based components. I have a getter to get the window innerWidth, but the value is only set once, it doesn't update if I change the window width.
get viewPortWidth() {
if (process.client) {
if (window.innerWidth !== undefined && window.innerHeight !== undefined) {
return window.innerWidth;
} else {
return document.documentElement.clientWidth;
}
}
return false;
}
If I write the value in the html: {{viewPortWidth}} it doesn't change.
The value is the same also in vue devtools.
Aren't getters supposed work like computed properties? How can I get to update seamlessly?
vue computed properties are cached based on their reactive dependencies. window.innerWidth not a reactive dependency.
you can track changing window size event by adding an event listener in your "created" lifecycle hook like this:
created(){window.addEventListener('resize', (e)=>{console.log(e)})}