时间戳

首页 > 解决方案 > Vue问题：v-for中的鼠标悬停在组件调用方法立即

javascript - Vue问题：v-for中的鼠标悬停在组件调用方法立即

问题描述

我在使用:mouseoverinv-for循环时遇到问题<component>。传入的方法:mouseover会为每个元素调用，但应该只对hovered元素调用。

<Single-technology 
                v-for="technology in $t('about.presentation.technologies')"
                :key="technology.name"
                :name="technology.name"
                :percentage="technology.percentage"
                :description="technology.description"
                :mouseover="showInfo()"
            />

 methods: {
        showInfo() {
            console.log("info");
        }
    }

我期待什么？我除了悬停（鼠标悬停）元素调用该showInfo()方法。

标签： javascriptvue.js

解决方案

如果mouseover是一个道具，则该值应作为方法名称传递（不是调用，将立即评估）：

<!-- BEFORE: -->
<Single-technology :mouseover="showInfo()" />

<!-- AFTER: -->
<Single-technology :mouseover="showInfo" />

但是如果mouseover实际上是一个事件名称，那么v-bind您应该在应该使用时错误地使用v-on：

<!-- BEFORE: -->
<Single-technology :mouseover="showInfo()" />

<!-- AFTER: -->
<Single-technology @mouseover="showInfo()" />

推荐阅读