Vue.js处理多个点击事件

Question

我有一个列表，想要处理列表中每个项目的点击事件

<ul>
  <li 
    v-for="item, index in items" 
    :key="index"
    @click="select(item)"
  >
    {{ item }}
  </li>
</ul>

脚本是

...
methods: {
  select(item) {
    console.log('Select', item)
  }
}

当有大约10个项目时，这很有效。但是，当大约有1000个项目时，性能变得非常慢，因为我为1000个项目附加了1000个事件。

解决方案是仅为列表附加一次点击事件，并使用event.target

<ul @click="select($event)">
  <li 
    v-for="item, index in items" 
    :key="index"
  >
    {{ item }}
  </li>
</ul>

在功能select中，如何获得与每个项目相对应的item？

Answer 1

您可以使用

<ul @click="select($event)">
  <li 
    v-for="item, index in items" 
    :key="index"
    :id="index"
  >
    {{ item }}
  </li>
</ul>

然后在select：

select($event) {
  console.log('Select ', $event.srcElement.id)
}