How to call multiple functions with click in vue

Question

Question   How to call multiple functions in a single  click   aka v-on click     I tried   Split functions with a semicolon   lt div  click  fn1  foo   fn2  bar    gt   lt  div gt   Use several  click   lt div  click  fn1  foo     click  fn2  bar    gt   lt  div gt     but how to do it properly   P S   For sure I always can do   lt div v-on click  fn3  foo    bar    gt   lt  div gt   function fn3  args       fn1 args     fn2 args       But sometimes this isn t nice

User · Answer

Html    lt div id  example  gt     lt button v-on click  multiple  gt Multiple lt  button gt   lt  div gt    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

User · Answer

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    lt v-btn absolute fab small slot  activator  top right color  primary   click   addTime   true   ticketExpenseList   false   gt  lt v-icon gt add lt  v-icon gt  lt  v-btn gt

User · Answer

This simple way to do     v-on click  firstFunction    secondFunction

User · Answer

You can use this   lt div  click  quot f1    f2   quot  gt  lt  div gt

User · Answer

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    lt div  click  handler  gt  lt  div gt                               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    lt div  click  fn1  foo   fn2   gt  lt  div gt                                       fn1  function value  callback        console log value       callback  bar       fn2  function value        console log value

User · Answer

On Vue 2 3 and above you can do this    lt div v-on click  firstFunction    secondFunction     gt  lt  div gt     or  lt div  click  firstFunction    secondFunction     gt  lt  div gt

User · Answer

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      lt div id  app  gt      lt div  click  handler  foo   bar    gt         Hi  click me      lt  div gt   lt  div gt    lt  -- link to vue js  -- gt    lt script src  vue js  gt  lt  script gt    lt script gt      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                                                          lt  script gt

User · Answer

If you want something a little bit more readable  you can try this    lt button  click   click1  event   click2  event    gt    Multiple  lt  button gt    To me  this solution feels more Vue-like hope you enjoy

User · Answer

You can do it like  lt button v-on click  quot Function1    Function2    quot  gt  lt  button gt   OR  lt button  click  quot Function1    Function2    quot  gt  lt  button gt

User · Answer

Separate into pieces   Inline    lt div  click  f1     f2    gt  lt  div gt     OR  Through a composite function    lt div  click  f3    gt  lt  div gt     lt script gt  var app   new Vue              methods        f3  function     f1     f2          f1  function           f2  function              lt  script gt

User · Answer

in Vue 2 5 1 for button works    lt button  click  firstFunction    secondFunction     gt Ok lt  button gt

User · Answer

you can  however  do something like this     lt div onclick  return function                  console log  yaay  another onclick event                        click  defaultFunction  gt  lt  div gt    yes  by using native onclick html event

User · Answer

to add an anomymous function to do that may be an alternative     lt div v-on click  return function     fn1  foo   fn2  bar         gt   lt  div gt

User · Answer

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

[javascript] How to call multiple functions with @click in vue?

Examples related to javascript

Examples related to vue.js