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

Question

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 ?

Barony

Answer 1

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

Leonialeonid

Glad to help you – Leonialeonid

It is a pity that does not exist something like $methods – Shanna

You can access the vue instance by using this.$options. – Leonialeonid

To satisfy typescript I used ((this as unknown) as { [key: string]: () => void })[function_name](); – Handcrafted

Thank you very much :). It's nice to read your answer! – Punctate

Answer 2

@click="[fuctionName]($event, index)"

Example:

<button v-for="(button,index) in items" @click="[fuctionNames[index]]($event, index)" > // consider fuctionNames array of Function Names.

Desrochers

Could you please add a few words to help explain your answer? – Bedpost

<button v-for="(button,index) in items" @click="[fuctionNames[index]]($event, index)" > // consider fuctionNames array of Function Names. – Desrochers

Thx for that. But if you want to add some explanation, you should use the edit button and add it to your answer. Comments are meant for asking for information or to suggest improvments. – Bedpost

Answer 3

So i did this in a way . In parent component you can do

  --parent--
    <MenuButton type="navbar_login" icon="bx bx-lock-alt" title="Login" :operation="gotoLogin"></MenuButton>
    
    --script--
    
    methods: {
       gotoLogin(){
          this.$router.push('/login');
       }
      }
    --children--
     <button
          v-if="type == 'navbar_login'"
           class="font-semibold text-xl text-green-700 flex rounded px-2 transform transition hover:-translate-y-1 duration-150 "
           @click=buttonClickFunction(operation)
    
           >
          <div class="flex my-1">
            <div class="animate-bounce">
              <i :class="icon"></i>
              </div> <p class="text-sm">{{title}}</p>
          </div>
        </button>
--props---

props: {
    operation: Function,
  },
--method--
methods: {
    buttonClickFunction(op) {
      console.log('button click',op);
      op();
    }
  }

Amrita

Answer 4

You can pass data with event

or, take a readonly input field with v-model

Example :

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

</tr>  

new Vue({
  ...
  ...
  methods:{
    itemClick:function(event){
       console.log(event.target.value);
    }
  }
})

Piassava

I want to pass the method name as a parameter, here the "itemClick" i need to pass through for loop.--- because I am creating the form through json. It has to be rendered based on the data mentioned in the json. – Barony