I am working with a span element that displays different background images based on certain conditions.
Here is the HTML:
<span
v-if="type"
:style="styles"
>
</span>
In the computed properties section:
styles() {
return {
"background-image": `url(${require(`../assets/images/${this.type}.png`)})`,
height: "30px",
width: "100%",
display: "block",
"background-size": "contain",
"background-repeat": "no-repeat",
"background-position": "center",
};
},
Additionally, I have another condition to display a different background image on mouseover.
stylesOnHover() {
return {
"background-image": `url(${require(`../assets/images/${this.type}-hover.png`)})`
};
},
I attempted to add
@mouseover="stylesOnHover"[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"
Could someone guide me on how to modify the background image property on mouseover? Thank you.