javascript - Vue.js handle multiple click event - Stack Overflow

admin管理员组

文章数量:1389897

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

Share Improve this question Follow asked Mar 7, 2017 at 10:08 pexea12pexea12 1,20922 gold badges1919 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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)
}

本文标签： javascriptVuejs handle multiple click eventStack Overflow