Vue.js는 여러 클릭 이벤트를 처리합니다.

Vue.js는 여러 클릭 이벤트를 처리합니다.

목록이 있으며 목록의 각 항목에 대한 클릭 이벤트를 처리하고 싶다.

<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개의 이벤트를 첨부하기 때문에 퍼포먼스가 매우 느려집니다.

해결책은 목록에 클릭 이벤트 1개만 첨부하여 사용하는 것입니다.event.target

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

기능 중select, 어떻게 하면item각 항목에 대응하고 있습니까?

사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/42645364/vue-js-handle-multiple-click-event