如何引用 v-for 中迭代的项？

Question

在下面的代码中，我使用

n=0,1,2

多次显示图像

v-for

，并且我希望每当将此类图像悬停在该图像上时就会出现与该图像对应的

n

数字的警报。

当然，使用下面的代码，每当我将鼠标悬停在图像上时，都会收到

n is not defined

错误。正确的代码实现方式是什么？

应用程序.vue：

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

Answer 1

为什么显示n未定义

• onmouseover

  未将 n 传递给警报参数，因为它不是指令

我们可以按如下方式解决这个问题

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

<script>
export default {
  methods: {
    handleMouseOver(n) {
      alert(n);
    },
  },
};
</script>