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個事件。

解決的辦法是隻附加一個單擊事件列表，並使用event.target

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

在功能select，我怎麼能得到item對應於每一個項目？

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