Vue.js обрабатывает событие с несколькими кликами

У меня есть список и вы хотите обработать событие click для каждого элемента в списке

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

И script есть

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

Это хорошо работает, когда есть около 10 предметов. Однако, когда есть около 1000 элементов, производительность становится очень медленной, потому что я добавляю 1000 событий для 1000 элементов.

Решение состоит в том, чтобы связать только одно событие click для списка и использовать event.target

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

В функции select, как я могу получить item, соответствующий каждому элементу?

Ответ 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)
}