How to pass a dynamic function name to the click event in Vue Js
@click="[fuctionName]($event, index)"
Example:
<button v-for="(button,index) in items" @click="[fuctionNames[index]]($event, index)" > // consider fuctionNames array of Function Names.
To use dynamic function call it is suggested to have a helper function that receives the function name and call the corresponding function.
handle_function_call(function_name) {
this[function_name]()
},
And from template when iterating over items you can call that function by passing the function name like
<button v-for="button of items"
:key="button.id"
@click="handle_function_call(button.fn_name)" //=> note here
>
{{ button.text }}
</button>
See it in action in jsfiddle