问题：
如何在一次@click 中调用多个函数？ （又名v-on:click）？
我试过了
用分号分割函数：<div @click="fn1('foo');fn2('bar')"> </div>;
使用多个@click:<div @click="fn1('foo')" @click="fn2('bar')"> </div>;
但是如何正确地做呢？
P.S.：当然我总能做到
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
但有时这并不好。
【问题讨论】：
标签： javascript vue.js
在 Vue 2.3 及更高版本上，您可以这样做：
<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>
【讨论】：
首先，为了便于阅读，您可以使用短符号 @click 而不是 v-on:click。
其次，您可以使用单击事件处理程序来调用其他函数/方法，如上面评论中提到的@Tushar，因此您最终会得到这样的结果：
<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>
【讨论】：
如果你想要一些更易读的东西，你可以试试这个：
<button @click="[click1($event), click2($event)]">
Multiple
</button>
对我来说，这个解决方案感觉更像 Vue，希望你喜欢
【讨论】：
添加一个异常函数来做到这一点可能是另一种选择：
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
【讨论】：
$event 作为 arg，则需要将其作为参数传递给新函数以在其中使用。例如。 ($event) => {func1($event); func2('x');}
<div @click="f1() + f2()"></div>
<div @click="f3()"></div>
<script>
var app = new Vue({
// ...
methods: {
f3: function() { f1() + f2(); }
f1: function() {},
f2: function() {}
}
})
</script>
【讨论】：
这个简单的方法 v-on:click="firstFunction(); secondFunction();"
【讨论】：
当您需要通过单击对话框内的按钮打开另一个对话框并关闭此对话框时，这适用于我。使用逗号分隔符将值作为参数传递。
<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
【讨论】：
在 Vue 2.5.1 中用于按钮工作
<button @click="firstFunction(); secondFunction();">Ok</button>
【讨论】：
Vue 事件处理仅允许单个函数调用。如果你需要做多个，你可以做一个包含两者的包装器：
<div @click="handler"></div>
////////////////////////////
handler: function() { //Syntax assuming its in the 'methods' option of Vue instance
fn1('foo');
fn2('bar');
}
编辑
另一个选项是编辑第一个处理程序以进行回调并传递第二个。
<div @click="fn1('foo', fn2)"></div>
////////////////////////////////////
fn1: function(value, callback) {
console.log(value);
callback('bar');
},
fn2: function(value) {
console.log(value);
}
【讨论】：
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()
【讨论】：
2021 年 12 月更新
你需要用逗号分隔 像这样：
<button @click="open(), onConnect()">Connect Wallet</button>
【讨论】：
我只想在这里添加一个我觉得在上面所有答案中都缺少的小部分；也就是说，当您想要添加多个点击处理程序时，您实际上需要调用该方法，而不仅仅是将其名称作为可调用传递。
这可能会让人感到意外，因为 Vue 允许将可调用对象传递给 click 处理程序。
这行得通
<div><button @click="foo(); bar();">Button1</button></div>
<div><button @click="foo">Button2</button></div>
这不是
<div><button @click="foo; bar;">Button3</button></div>
【讨论】：
我要补充一点，您还可以使用它来调用多个发射或方法，或通过用 ; 分隔来同时调用两者。分号
@click="method1(); $emit('emit1'); $emit('emit2');"
【讨论】：
你可以用这个：
<div @click="f1(), f2()"></div>
【讨论】：
你可以这样做
<button v-on:click="Function1(); Function2();"></button>
或
<button @click="Function1(); Function2();"></button>
【讨论】：
只需执行以下操作：
$event:
<div @click="function1($event, param1); function2($event,param1);"></div>
没有$event:
<div @click="function1(param1); function2(param1);"></div>
【讨论】：
基于 ES6 的匿名函数：
<button @click="() => { function1(); function2(); }"></button>
【讨论】：
但是，您可以这样做：
<div onclick="return function()
{console.log('yaay, another onclick event!')}()"
@click="defaultFunction"></div>
是的，通过使用原生 onclick html 事件。
【讨论】：