Here is a component structure that I am working with:
Vue.component('navbar', {
props: ['navitem'],
methods: {
users: function () {
//users code
},
test:function(){
}
},
template: '<li v-on:click="navitem.name"> {{navitem.name}} </li>'
});
I am trying to pass the array below to the component:
navitems: [{ id: 1, name: 'users' }, { id: 2, name: 'test' }]
and display them using the following code: v-for="item in navitems" v-bind:navitem="item" :key="item.id"
so that each list item corresponds to the correct event listener, the final rendered list items should look like this:
<li v-on:click="users()"></li>
<li v-on:click="test()"></li>
Could you please advise on how this can be achieved?