如何使用v-on调用多个函数:单击

Question

如何在单个v-on:click事件中调用多个函数？没有区别:点击,关注或其他什么？

就像是:

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

或者可能:

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

怎么做对了？

更新:是的,我当然可以做到

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

但这真的很难看.

Answer 1

我在Vue 2.3上,我可以这样做:

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

Answer 2

首先,您可以使用简短表示法@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>

Answer 3

如果你想要一些更具可读性的东西，你可以试试这个：

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

对我来说，这个解决方案感觉更像 Vue 希望你喜欢

Answer 4

2021 年 12 月更新

你需要用逗号分隔，如下所示：

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

Answer 5

添加一个匿名函数来做到这一点可能是另一种选择:

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

Answer 6

分成几块.

排队:

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

或者:通过复合函数:

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

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>

Answer 7

这种简单的v-on方式:click ="firstFunction(); secondFunction();"

Answer 8

我只是想在这里添加一个小的缺失的部分，我在上面的所有答案中都感觉缺失了这一点；也就是说，当想要添加多个单击处理程序时，您实际上需要调用该方法，而不仅仅是将其名称传递为可调用。

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

Answer 9

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

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>

Answer 10

基于 ES6 的匿名函数：

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

Answer 11

事件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);
}

Answer 12

在Vue 2.5.1中用于按钮工作

 <button @click="firstFunction(); secondFunction();">Ok</button>