0

I have a span that shows different background-image on different conditions.

HTML:

  <span
      v-if="type"
      :style="styles"
    >
  </span>

In Computed:

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

And I have another condition to show different background-image on mouseover.

stylesOnHover() {
  return {
    "background-image": `url(${require(`../assets/images/${this.type}-hover.png`)})`
  };
},

I tried to add @mouseover="stylesOnHover" in the HTML span but it shows error :

[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"

How can I change the background-image property on mouseover ? Thanks.

hatched
  • 795
  • 2
  • 9
  • 34

2 Answers2

0

You are returning an object from your method which is not applying the style to the element. You could set a boolean in your state which determines the styles applied to the element and handle the rest in your template. Or you could let your boolean determine to merge the style in your computed styles.

Kim Boender
  • 356
  • 4
  • 14
0

This is the best solution you are looking for https://stackoverflow.com/a/46553407/14438744 (use background-image instead)

If you really want to use mouseover, then stylesOnHover need to be a method or if computed then it needs to return a function. You will then change the backgroundImage of event.target.style inside that method/function.

devdgehog
  • 575
  • 2
  • 8