Basically I want to change the image src on hover. here is my code:

<li v-for="(item, key) in items" @mouseover="changeImg">
    <img :src="item.img.grey">
    <p>{{key}}</p>
</li>

<script>
 app = new Vue({
        el: '#app',
        data: {
            items: {
             first:{
                  img:{
                     grey:'assets/img/first-grey.png',
                     green:'assets/img/first-green.png'
                  }
             },
             second:{
                  img:{
                     grey:'assets/img/second-grey.png',
                     green:'assets/img/second-green.png'
                  }
             },
          },
        },
        methods: {
            changeImg(key) {
                //selected li's image should be green
            }
        }
    })
 </script>

after hovering on li element i want the hovered image to be green

Basically I want to change the image src on hover. here is my code:

<li v-for="(item, key) in items" @mouseover="changeImg">
    <img :src="item.img.grey">
    <p>{{key}}</p>
</li>

<script>
 app = new Vue({
        el: '#app',
        data: {
            items: {
             first:{
                  img:{
                     grey:'assets/img/first-grey.png',
                     green:'assets/img/first-green.png'
                  }
             },
             second:{
                  img:{
                     grey:'assets/img/second-grey.png',
                     green:'assets/img/second-green.png'
                  }
             },
          },
        },
        methods: {
            changeImg(key) {
                //selected li's image should be green
            }
        }
    })
 </script>

after hovering on li element i want the hovered image to be green

• javascript
• vue.js

1 Answer 1

Create a variable in your data called hovered where you store the key of the hovered image, and conditionally select the image you need based on that variable

<li v-for="(item, key) in items">
    <img :src="hovered === key ? item.img.green : item.img.grey" 
         @mouseover="hovered = key"
         @mouseleave="hovered = null">
    <p>{{key}}</p>
</li>

<script>
 app = new Vue({
        el: '#app',
        data: {
            hovered: null,
            items: {
             first:{
                  img:{
                     grey:require('assets/img/first-grey.png'),
                     green:require('assets/img/first-green.png)'
                  }
             },
             second:{
                  img:{
                     grey:require('assets/img/second-grey.png'),
                     green:require('assets/img/second-green.png')
                  }
             },
          },
        },
    })
</script>