Is it possible to have a reactive window width where a variable or data property tracks a window resize
e.g
computed:{
smallScreen(){
if(window.innerWidth < 720){
this.$set(this.screen_size, "width", window.innerWidth)
return true
}
return false
}
I don't think there's a way to do that unless you attach a listener on the window.
You can add a property windowWidth
on the component's data
and attach the resize listener that modifies the value when the component is mounted.
Try something like this:
<template>
<p>Resize me! Current width is: {{ windowWidth }}</p>
</template
<script>
export default {
data() {
return {
windowWidth: window.innerWidth
}
},
mounted() {
window.onresize = () => {
this.windowWidth = window.innerWidth
}
}
}
</script>
Hope that helps!
You can also attach a class depending on the window width
<template>
<p :class="[`${windowWidth > 769 && windowWidth <= 1024 ? 'special__class':'normal__class'}`]">Resize me! Current width is: {{ windowWidth }}</p>
</template>
<script>
export default {
data() {
return {
windowWidth: window.innerWidth
}
},
mounted() {
window.onresize = () => {
this.windowWidth = window.innerWidth
}
}
}
</script>
<style scoped>
.normal__class{
}
.special__class{
}
</style>
If you are using multiple components with this solution, the accepted answer's resize handler function will update only the last component.
Then you should use this instead:
import { Component, Vue } from 'vue-property-decorator';
@Component
export class WidthWatcher extends Vue {
public windowWidth: number = window.innerWidth;
public mounted() {
window.addEventListener('resize', this.handleResize);
}
public handleResize() {
this.windowWidth = window.innerWidth;
}
public beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
}
source: https://github.com/vuejs/vue/issues/1915#issuecomment-159334432
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With