I have a list and want to handle a click event for each item in the list

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

And the script is

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

This works well when there are about 10 items. However, when there are about 1000 items, the performance bees very slow because I attach 1000 events for 1000 items.

The solution is to attach only one click event for the list and use event.target

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

In function select, how can I get item corresponding to each item?

I have a list and want to handle a click event for each item in the list

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

And the script is

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

This works well when there are about 10 items. However, when there are about 1000 items, the performance bees very slow because I attach 1000 events for 1000 items.

The solution is to attach only one click event for the list and use event.target

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

In function select, how can I get item corresponding to each item?

• javascript
• mouseevent
• vuejs2
• vue.js

1 Answer 1

You can use

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

Then in your select:

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