To enhance readability, consider using the concise notation @click instead of v-on:click.

Additionally, you can create a click event handler that invokes other functions/methods as suggested by Tushar in the preceding comment. This approach allows for a more structured code like this:

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

<!-- Include vue.js library --> 
<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>

For a slightly more user-friendly option, give this a shot:

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

In my opinion, this approach aligns better with Vue principles. Give it a try and see how you like it!

Last updated in December 2021

It is important to properly separate elements with a comma, following this example:

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

Consider incorporating an anonymous function as another approach:

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

Disintegrate into fragments.

Interwoven:

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

OR: Utilizing a combined function:

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

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

In addition to the responses provided above, I noticed a small detail that was missing: it's important to actually call the method rather than just passing its name as a callable when you want to add multiple click handlers.

This may be surprising because Vue allows for passing a callable to the click handler.

Here is an example where it works:

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

However, here is an example where it does not work:

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

Check out this JsFiddle example for more information.

An easy method for executing v-on:click="firstFunction(); secondFunction();" in a single click event

This method has proven effective for me when you want to trigger the opening of a new dialog box by clicking on a button within an existing dialog box, while also closing the current one. Make sure to pass the necessary values as parameters separated by commas.

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

When using Vue version 2.5.1, the following code snippet can be used for a button:

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

Implementing ES6 using arrow functions:

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

In Vue, the event handling feature is designed to accommodate single function calls. To execute multiple functions, you have a couple of options. One approach is to create a wrapper that includes both functions:

<div @click="handler"></div>
////////////////////////////
handler: function() { //Assuming this code is within the 'methods' option of Vue instance
    fn1('foo');
    fn2('bar');
}

ADDITIONAL OPTION

You can also modify the initial handler to accept a callback and pass in the second function.

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

Here is the code snippet in HTML and JS:

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

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  
  methods: {
    multiple: function (event) {
      this.firstMethod()
      this.secondMethod()
    },
    
    firstMethod: function (event) {
      // First method logic goes here
    },
    
    secondMethod: function (event) {
      // Second method logic goes here
    }
  }
})

vm.multiple()

Here is a solution:

<span @click="function1(), function2()"></span>

Here is a simple way to achieve this:

• If you want to use $event:

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

• If you don't need to use $event:

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

Here is a way to accomplish it:

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

Alternatively:

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

Another useful tip is that you can utilize this technique to trigger multiple emits or methods, or even a combination of both, by simply separating them with a semicolon (;).

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

After searching for a solution, I experimented with various methods and ultimately found one that worked best for me. I wanted to share it with you all. ***You can utilize template literals to combine multiple functions within a single event in Vue.js

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

Just a note: I personally am using vue3.

To incorporate JavaScript code, you can use a regular multiline approach:

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