Vue JS 过渡使用 in v for

Question

我是 vuejs 新手，遇到问题。看我的代码

模板：

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

脚本：

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

风格：

.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;
    }
}

现在我的问题是当鼠标在 li 上输入时，所有 li 转换工作并显示信息 class。我知道它是因为 isHover 变量。但我不知道在使用 $(this).find(CHILD) 时如何处理 JQuery 这样的问题。我搜索了很多但没有找到解决方案...

Answer 1

在组件数据函数中定义了一个属性，例如 hoveredItem，然后更改 @moueseenter 和 @mouseleave 处理程序以相应地设置 this.hoveredItem。这是代码：

  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>

Vue JS 过渡使用 in v for

Vue JS transition using in v for

transition

vue.js

v-for

vuejs-transition