Vue: How do I call multiple functions with @click?

Question

How can I call multiple functions in a single @click? (aka v-on:click)?

So far I tried

• Splitting the functions with a semicolon: <div @click="fn1('foo');fn2('bar')"> </div>;

• Using several @click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>;

and as a workaround, I can just create a handler:

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

But sometimes this isn't nice. What would be the proper method/syntax?

Answer 1

On Vue 2.3 and above you can do this:

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>

Answer 2

First of all you can use the short notation @click instead of v-on:click for readability purposes.

Second You can use a click event handler that calls other functions/methods as @Tushar mentioned in his comment above, so you end up with something like this :

<div id="app">
   <div @click="handler('foo','bar')">
       Hi, click me!
   </div>
</div>

<!-- link to vue.js !--> 
<script src="vue.js"></script>

<script>
   (function(){
        var vm = new Vue({
            el:'#app',
            methods:{
                method1:function(arg){
                    console.log('method1: ',arg);
                },
                method2:function(arg){
                    console.log('method2: ',arg);
                },
                handler:function(arg1,arg2){
                    this.method1(arg1);
                    this.method2(arg2);
                }
            }
        })
    }()); 
</script>

Answer 3

If you want something a little bit more readable, you can try this:

<button @click="[click1($event), click2($event)]">
  Multiple
</button>

To me, this solution feels more Vue-like hope you enjoy

Answer 4

updated dec-2021

you need to separate with a comma like this:

<button @click="open(), onConnect()">Connect Wallet</button>

Answer 5

to add an anomymous function to do that may be an alternative:

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div> 

Answer 6

Separate into pieces.

Inline:

<div @click="f1() + f2()"></div> 

OR: Through a composite function:

<div @click="f3()"></div> 

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>

Answer 7

This simple way to do v-on:click="firstFunction(); secondFunction();"

Answer 8

This works for me when you need to open another dialog box by clicking a button inside a dialogue box and also close this one. Pass the values as params with a comma separator.

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>

Answer 9

I just want to add one small missing bit here which I felt missing in all of the answers above; that is you actually need to call the method rather than just passing its name as callable, when want to add multiple click handlers.

This might come as a surprise since Vue allows passing a callable to the click handler.

This works

<div><button @click="foo(); bar();">Button1</button></div>
<div><button @click="foo">Button2</button></div>

This does not

<div><button @click="foo; bar;">Button3</button></div>

JsFiddle example

Answer 10

in Vue 2.5.1 for button works

 <button @click="firstFunction(); secondFunction();">Ok</button>

Answer 11

The Vue event handling only allows for single function calls. If you need to do multiple ones you can either do a wrapper that includes both:

<div @click="handler"></div>
////////////////////////////
handler: function() { //Syntax assuming its in the 'methods' option of Vue instance
    fn1('foo');
    fn2('bar');
}

EDIT

Another option is to edit the first handler to have a callback and pass the second in.

<div @click="fn1('foo', fn2)"></div>
////////////////////////////////////
fn1: function(value, callback) {
    console.log(value);
    callback('bar');
},
fn2: function(value) {
    console.log(value);
}

Answer 12

Based on ES6 with anonymous functions:

<button @click="() => { function1(); function2(); }"></button>

Answer 13

Html:

<div id="example">
  <button v-on:click="multiple">Multiple</button>
</div>

JS:

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    multiple: function (event) {
      this.first()
      this.second()
    }
    first:  function (event) {
      //yourstuff
    }
    second: function (event) {
      //yourstuff
    }
  }
})

vm.multiple()

Answer 14

You can use this:

<div @click="f1(), f2()"></div> 

Answer 15

Simply do like below:

• with $event:

  <div @click="function1($event, param1); function2($event,param1);"></div>
  

• without $event:

  <div @click="function1(param1); function2(param1);"></div>
  

Answer 16

You can do it like

<button v-on:click="Function1(); Function2();"></button>

OR

<button @click="Function1(); Function2();"></button>

Answer 17

I'd add, that you can also use this to call multiple emits or methods or both together by separating with ; semicolon

  @click="method1(); $emit('emit1'); $emit('emit2');"

Answer 18

I was also looking this solution and used different methods and I found this one best for me. Just shared with you ***You can use template literals to use multiple function in one event in vuejs

<div @click="`${firstFunction() ${secondFunction() ${thirdFucntion()}`"></div>

Note:I am using vue3.

Answer 19

You can write javascript as a normal multiline:

@click="(event) => {
          console.log(event);
          console.log("Second log");
        }"

Answer 20

you can, however, do something like this :

<div onclick="return function()
              {console.log('yaay, another onclick event!')}()" 
              @click="defaultFunction"></div>

yes, by using native onclick html event.