How to use @mouseover to change the image on the v-img compoment?

Question

I'm using Vuetify and I have an imageA on the v-img :src that needs to be replaced with imageB on hover only. Now it's replacing on hover and not changing when the mouse is out.

I've tried @mouseover

<v-img
  :src="imageA"
  width="200px"
  height="auto"
  @mouseover="imageA = imageB"
>

data() {
  return {
    imageA: require('@/assets/images/imageA.jpg'),
    imageB: require('@/assets/images/imageB.jpg'),
  }
}

And also @mouseenter / @mouseleave:

@mouseenter="imageA = imageB"
@mouseleave="imageB = imageA"

Thanks

The problem above is that you're not saving `imageA` (into a temporary variable) before overwriting it, and when you try to restore it on `mouseleave`, you're only restoring `imageB`'s value and doing nothing with `imageA`. An alternative that doesn't require a temporary variable would be to do a [swap](https://stackoverflow.com/questions/16201656/how-to-swap-two-variables-in-javascript). — tony19, Jun 21 '19 at 00:13

score 1 · Accepted Answer · answered Jun 20 '19 at 23:52

1

Solved with v-hover

<v-hover>
  <v-img
    slot-scope="{ hover }"
    v-if="hover"
    :src="imageB"
    width="200px"
    height="auto"
  >
  </v-img>
  <v-img
    v-else
    :src="imageA"
    width="200px"
    height="auto"
  >
  </v-img>
</v-hover>

answered Jun 20 '19 at 23:52

Fabio Zanchi

924
3
16
32

How to use @mouseover to change the image on the v-img compoment?

1 Answers1