Vuejs 在 hover 上更改圖像 src

Question

基本上我想更改 hover 上的圖像 src。 這是我的代碼：

<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>

懸停在 li 元素上后，我希望懸停的圖像為綠色

Answer 1

在您的數據中創建一個名為hovered的變量，您可以在其中存儲懸停圖像的鍵，並根據該變量有條件地 select 您需要的圖像

<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>