Javascript 如何在vue中使用@click调用多个函数？

How to call multiple functions with @click in vue?

提问by Sergei Panfilov

Question:

题：

How to call multiple functions in a single @click? (aka v-on:click)?

如何在单个@click 中调用多个函数？（又名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>;

• 用分号分割函数：<div @click="fn1('foo');fn2('bar')"> </div>;

• 使用几种@click：<div @click="fn1('foo')" @click="fn2('bar')"> </div>;

but how to do it properly?

但如何正确地做到这一点？

P.S.: For sure I always can do

PS：当然我总是可以做到

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

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

But sometimes this isn't nice.

但有时这并不好。

回答by Stuart Cusack

On Vue 2.3 and above you can do this:

在 Vue 2.3 及更高版本上，您可以执行以下操作：

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

回答by ismnoiet

First of all you can use the short notation @clickinstead of v-on:clickfor readability purposes.

首先，您可以使用短符号@click代替v-on:click可读性。

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 :

其次，您可以使用点击事件处理程序调用其他函数/方法，如上面评论中提到的@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>

回答by Wolfgang

to add an anomymous function to do that may be an alternative:

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

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

回答by Shailen Naidoo

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

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

回答by Inanc Gumus

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>

回答by Mr Nobody

This simple way to do v-on:click="firstFunction(); secondFunction();"

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

回答by user2841183

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>

回答by Zhurov Konstantin

in Vue 2.5.1 for button works

在 Vue 2.5.1 中用于按钮工作

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

回答by m_callens

The Vueevent handling only allows for single function calls. If you need to do multiple ones you can either do a wrapper that includes both:

该Vue事件处理只允许单个函数调用。如果你需要做多个，你可以做一个包含两者的包装器：

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

回答by RaV

Html:

网址：

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

JS:

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