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 ईवेंट संलग्न करता हूं।

समाधान कैसे मैं item प्रत्येक आइटम के लिए इसी प्राप्त कर सकते हैं, सूची के लिए केवल एक क्लिक घटना देते हैं और event.target

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

समारोह select में उपयोग करने के लिए है?

Answer 1

आप अपने select में

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

तो उपयोग कर सकते हैं:

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