我有一个这样的组件：
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="item in naviitems" v-bind:navitem="item" :key="item.id"
这样每个列表项都会得到相应的事件监听器，即最终呈现的列表项将是这样的：
<li v-on:click="users()"></li>
<li v-on:click="test()"></li>
如果可能，如何做到这一点？
请记住，您正在向组件传递一个字符串，而不是函数引用。要调用该函数，只需在组件对象中查找该函数，然后调用它即可从该组件中“选择”该函数。
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>'
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句