如何在v-for循环中引用迭代项？解决鼠标悬停n未定义报错

你遇到的问题是因为原生onmouseover属性里的代码运行在浏览器全局作用域，无法访问Vue模板v-for循环中的局部变量n。以下是两种正确的实现方式：

方式一：直接使用Vue事件绑定传参 #

利用Vue的@mouseover（v-on:mouseover的语法糖）绑定事件，直接将循环变量n传入事件处理：

<template>
  <div>
    <img v-for="n in [0,1,2]" :key="n" 
         src="something.png" @mouseover="alert(n)">
  </div>
</template>

方式二：内联箭头函数传递变量 #

如果需要在事件中执行更复杂的逻辑，也可以用箭头函数包裹，确保n的作用域正确：

<template>
  <div>
    <img v-for="n in [0,1,2]" :key="n" 
         src="something.png" @mouseover="() => alert(n)">
  </div>
</template>

核心原因说明 #

原生DOM事件属性（如onmouseover）的回调代码是在全局环境执行的，而Vue模板里的n是v-for循环生成的局部变量，仅存在于Vue的模板作用域内。改用Vue的事件绑定语法后，Vue会自动维护变量的作用域，让回调函数能正确访问到当前循环的n值。

内容的提问来源于stack exchange，提问作者Sam