[Vuejs]-Change :src on mouseover

by

1👍

✅

A defined method can be triggered when the mouse is over img component.

<template>
<img :src="imgResource" @mouseover="hoverEvent" alt="" class="img-responsive">
</template>
<script>
export default {
  data() {
    return {
       imgResource: gift.images.edges[0].node.src
    }
  },
  methods: {
    hoverEvent() {
      this.imgResource = gift.images.edges[1].node.src
    }
  }
}
</script>
👤Nafiz Bayındır

4👍

Yes you can definately do that. For an example:

<template>
  <div id="app">
    <h1>Hover to change the image</h1>  
    <img :src="imgUrl" @mouseover="changeImgUrl" alt="image" class="img-responsive">
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      imgUrl: gift.images.edges[0].node.src
    };
  },
  methods: {
    changeImgUrl() {
      this.imgUrl = gift.images.edges[1].node.src;
    }
  }
};
</script>

Check this sandbox for example

👤Vectrobyte

Leave a comment