My array contains objects with methods as actions from a vue object.
How can I dynamically set the @click event in a v-for loop?
I attempted to use this.m1, "this.m1", "m1", but encountered an error:
fns.apply is not a function.
Javascript:
new Vue({
el: "#app",
data: {
items: [
{ title: "Learn JavaScript", action: this.m1 },
{ title: "Learn Vue", action: "m2" },
{ title: "Play around in JSFiddle", action: "this.m3"},
{ title: "Build something awesome", action: "m4"}
]
},
methods: {
m1() {
console.log('1');
},
m2() {
console.log('2');
},
m3() {
console.log('3');
},
m4() {
console.log('4');
},
}
})
Html:
<div id="app">
<div v-for="item in items">
<a @click="item.action" href="#">
{{ item.title }}
</a>
</div>
</div>