I am struggling to update the appearance of an HTML element when the window size is below 500px. Currently, I have a computed property that sets a background-image for the element. I attempted to use an if statement within the computed property to check if window.innerWidth < 500, but it appears that logic cannot be used inside computed properties. My most recent effort involved creating a method to check the window width, and if it's less than 500, to update the computed property with the new value. However, this approach doesn't seem to be working.
Any assistance would be greatly appreciated. Thank you!
<template>
<div class="hero" :style="bgImage">
</template
data() {
return {
window: {
width: 0
}
}
},
created() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
},
destroyed() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
if (window.width < 500) {
this.bgImage = `backgroundImage: linear-gradient(to bottom,rgba(245, 246, 252, 0) 45%,rgb(0, 0, 0) 100%), url(${this.hero.image})`
}
}
},
computed: {
bgImage() {
return {
backgroundImage: `url(${this.hero.image})`
}
}
}