How to call multiple functions with @click in vue?
Javascriptvue.jsJavascript Problem Overview
Question:
How to call multiple functions in a single @click
? (aka v-on:click
)?
I tried
-
Split functions with a semicolon:
<div @click="fn1('foo');fn2('bar')"> </div>
; -
Use several
@click
:<div @click="fn1('foo')" @click="fn2('bar')"> </div>
;
but how to do it properly?
P.S.: For sure I always can do
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
But sometimes this isn't nice.
Javascript Solutions
Solution 1 - Javascript
On Vue 2.3 and above you can do this:
<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>
Solution 2 - Javascript
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>
Solution 3 - Javascript
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
Solution 4 - Javascript
to add an anomymous function to do that may be an alternative:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
Solution 5 - Javascript
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>
Solution 6 - Javascript
This simple way to do v-on:click="firstFunction(); secondFunction();"
Solution 7 - Javascript
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>
Solution 8 - Javascript
updated dec-2021
you need to separate with a comma like this:
<button @click="open(), onConnect()">Connect Wallet</button>
Solution 9 - Javascript
in Vue 2.5.1 for button works
<button @click="firstFunction(); secondFunction();">Ok</button>
Solution 10 - Javascript
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);
}
Solution 11 - Javascript
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()
Solution 12 - Javascript
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>
Solution 13 - Javascript
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');"
Solution 14 - Javascript
You can use this:
<div @click="f1(), f2()"></div>
Solution 15 - Javascript
You can do it like
<button v-on:click="Function1(); Function2();"></button>
OR
<button @click="Function1(); Function2();"></button>
Solution 16 - Javascript
Simply do like below:
-
with
$event
:<div @click="function1($event, param1); function2($event,param1);"></div>
-
without
$event
:<div @click="function1(param1); function2(param1);"></div>
Solution 17 - Javascript
Based on ES6 with anonymous functions:
<button @click="() => { function1(); function2(); }"></button>
Solution 18 - Javascript
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.
Solution 19 - Javascript
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.