Search code examples
javascriptfunctionvue.js

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

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?

Solution

  • On Vue 2.3 and above you can do this:

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