如何在 Vue 组件中的每个列表项上附加事件侦听器?

Question

我有一个这样的组件：

Vue.component('navbar', {
props: ['navitem'],
methods: {
users: function () {
//users code
},
test:function(){
}
},
template: '<li v-on:click="navitem.name"> {{navitem.name}} </li>'
});

我想将以下数组传递给组件：

navitems: [{ id: 1, name: 'users' }, { id: 2, name: 'test' }]

并像这样渲染它们：v-for="Itemin navitems" v-bind：navitem="item" ：key="item.id">

以便每个列表项获取相应的事件侦听器， 即最终呈现的列表项将如下所示：

<li v-on:click="users()"></li> 
<li v-on:click="test()"></li>

如果可能的话，如何做到这一点？

Answer 1

请记住，您正在将字符串传递给组件，而不是函数引用。要调用函数，只需从组件中"选择"函数，方法是在组件对象中查找函数，然后调用它。

Vue.component('navbar', {
props: ['navitem'],
methods: {
users: function () {
//users code
},
test:function(){
},
clickHandler(name) {
this[name]();
}
},
template: '<li v-on:click="clickHandler(navitem.name)"> {{navitem.name}} </li>'
});