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.
This question is related to
javascript
vue.js
to add an anomymous function to do that may be an alternative:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
You can use this:
<div @click="f1(), f2()"></div>
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()
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');"
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.
This simple way to do v-on:click="firstFunction(); secondFunction();"
in Vue 2.5.1 for button works
<button @click="firstFunction(); secondFunction();">Ok</button>
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
You can do it like
<button v-on:click="Function1(); Function2();"></button>
OR
<button @click="Function1(); Function2();"></button>
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);
}
<div @click="f1() + f2()"></div>
<div @click="f3()"></div>
<script>
var app = new Vue({
// ...
methods: {
f3: function() { f1() + f2(); }
f1: function() {},
f2: function() {}
}
})
</script>
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>
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>
Source: Stackoverflow.com