Vue JS transition using in v for

Question

Im new to vuejs and I have problem. look my code

Template:

<div class="component">
    <ul>
        <li v-for="game in games" :class="{active: isHover}" @mouseenter="isHover=true" @mouseleave="isHover=false">
            <div class="poster">
                <img :src="game.poster" :alt="game.title">
            </div>
            <transition name="show">
                <div class="information" v-if="isHover">
                    <div class="name">
                        <p>{{game.name}}</p>
                    </div>
                    <div class="text">
                        <p>{{game.demo}}</p>
                    </div>
                    <div class="link">
                        <a href="#">OPEN LINK</a>
                    </div>
                </div>
            </transition>
        </li>
    </ul>
</div>

Script:

// Library
import {ref} from "vue";

// Export
export default {
    name: "GameBar",
    setup()
    {
        let isHover=ref(false)
        const games=ref([
            {
                name: 'RAINBOW SIX',
                demo: 'Some Text Some Text Some Text Some Text Some Text Some Text',
                poster: 'assets/home/media/game/3.jpg',
            },{
                name: 'PUBG',
                demo: 'Some Text Some Text Some Text Some Text Some Text Some Text',
                poster: 'assets/home/media/game/6.jpg',
            }
        ])
        return {
            isHover,games
        }
    }
}

Style:

.component{

    // Animation
    .show-enter-active,.show-leave-active{
        transition: all 0.2s ease;
    }
    .show-enter-to,.show-leave-from{
        opacity: 1;
    }
    .show-enter-from,.show-leave-to{
        opacity: 0;
        top: 5px !important;
    }
}

Now my problem is when mouse enter on li, all li transition work and show information class. I know its because of isHover variable. but I don`t know how can I handle this like JQuery when using $(this).find(CHILD). I searched a lot but no solution found...

Answer 1

Defined a property in the components data function, for example hoveredItem, and then change @moueseenter and @mouseleave handlers to set this.hoveredItem accordingly. Here's the code:

  data() {
    return {
      hoveredItem: '',
    };
  },

<li
  v-for="game in games"
  :key="game.name"
  :class="{active: game.name == hoveredItem}"
  @mouseenter="hoveredItem = game.name"
  @mouseleave="hoveredItem = ''"
>
  <!-- rest of the code -->
</li>