vue.jsdynamicform

How to pass a dynamic function name to the click event in Vue Js


Is there any way we can pass the function name from the parameters ?

some thing like this..

<tr v-for="item in items" class="static" 
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="item.click(item.contactID)" >

</tr>  

item.click is not converting as corresponding function while rendering the page. what is the correct approach any suggestions will be appreciated ?


Solution

  • 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