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