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 ?

score 37 · Accepted Answer · answered Oct 15 '18 at 11:30

37

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

answered Oct 15 '18 at 11:30

Roland

24,554
4
99
97

Glad to help you – Roland Oct 16 '18 at 06:05
It is a pity that does not exist something like `$methods` – Илья Зеленько Jul 21 '19 at 14:30
You can access the vue instance by using `this.$options`. – Roland Jul 21 '19 at 15:03
1

To satisfy typescript I used `((this as unknown) as { [key: string]: () => void })[function_name]();` – shs Jul 05 '21 at 14:40
Thank you very much :). It's nice to read your answer! – Travis Le Dec 30 '21 at 09:50

Anoop chaudhary · Answer 2 · 2019-04-30T16:56:24.350

2

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

Example:

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

edited Apr 30 '19 at 16:56

answered Apr 30 '19 at 06:42

Anoop chaudhary

87
2
12

1

Could you please add a few words to help explain your answer? – Joey Apr 30 '19 at 07:02
1

``` – Anoop chaudhary Apr 30 '19 at 08:01
2

Thx for that. But if you want to add some explanation, you should use the `edit` button and add it to [your answer](https://stackoverflow.com/help/how-to-answer). [Comments](https://stackoverflow.com/help/privileges/comment) are meant for asking for information or to suggest improvments. – Joey Apr 30 '19 at 08:58

score 1 · Answer 3 · answered Jul 22 '21 at 06:59

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();
    }
  }

score 0 · Answer 4 · answered Oct 15 '18 at 07:53

0

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);
    }
  }
})

answered Oct 15 '18 at 07:53

Emtiaz Zahid

2,645
2
19
35

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. – Tony Tom Oct 15 '18 at 08:59

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

4 Answers4