How to call multiple function with v-on:click

Question

How to call a multiple functions in single v-on event? No difference: click, focus or whatever?

Something like:

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

Or may be:

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

How to do it right?

UPDATE: Yes, of course I always can do

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

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

But that's really ugly.

Answer 1

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

Answer 2

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