CODEWITHSUNDEEP
vue.jsvuetify.js
Fabio Zanchi
Fabio Zanchi

Reputation: 945

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

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

Upvotes: 1

Views: 4425

Answers (1)

Fabio Zanchi
Fabio Zanchi

Reputation: 945

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>

Upvotes: 1

Related Questions