如何使用@click in vue 调用多个函数？

问题:

如何调用多个函数在一个单一的 @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);
}

但有时候这样不好。

249017 次浏览
小开

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);
}
小开

网址:

<div id="example">
<button v-on:click="multiple">Multiple</button>
</div>

约翰逊:

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()
小开

首先，出于可读性的考虑，您可以使用短符号 @click而不是 v-on:click。

第二，你可以使用一个 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>
小开

添加一个匿名函数，这可能是另一种选择:

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
小开

分成碎片。

内联:

<div @click="f1() + f2()"></div>

或: 通过一个复合函数:

<div @click="f3()"></div>


<script>
var app = new Vue({
// ...
methods: {
f3: function() { f1() + f2(); }
f1: function() {},
f2: function() {}
}
})
</script>
小开
最佳答案

在 Vue 2.3及以上版本，你可以这样做:

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

然而，你可以这样做:

<div onclick="return function()
{console.log('yaay, another onclick event!')}()"
@click="defaultFunction"></div>

是的，通过使用本机 onclick html 事件。

小开

这个简单的方法 V-on: click = “ firstFunction () ; second function () ;”

小开

当您需要通过单击对话框中的一个按钮打开另一个对话框并关闭这个对话框时，这种方法对我很有效。用逗号分隔符将值作为参数传递。

<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>
小开

如果你想要一些更易读的东西，你可以试试这个:

<button @click="[click1($event), click2($event)]">
Multiple
</button>

对我来说，这个解决方案感觉更 Vue-like 希望你享受

小开

我要补充的是，您还可以使用这个函数通过与; 分号分隔来调用多个 emits 或方法，或者两者兼而有之

  @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>
小开

我只是想在这里添加一个小的缺失，我觉得在上面的所有答案中都缺失了; 那就是当你想要添加多个单击处理程序时，你实际上需要调用这个方法，而不仅仅是传递它的名称作为可调用的。

这可能会让人感到惊讶，因为 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>

JsFiddle 的例子

小开

基于具有匿名函数的 ES6:

<button @click="() => { function1(); function2(); }"></button>
小开

更新日期: 2021年12月

你需要用逗号分开 像这样:

<button @click="open(), onConnect()">Connect Wallet</button>
小开

我也在寻找这个解决方案，并使用了不同的方法，我发现这是最适合我的。刚和你分享了 * * * 可以使用模板文字在 vuejs 中的一个事件中使用多个函数

<div @click="`${firstFunction() ${secondFunction() ${thirdFucntion()}`"></div>

注意: 我正在使用 vue3。


提交答案