分成几部分。

Question

如何在单个v-on事件中调用多个函数？没有区别：点击，关注还是其他什么？

类似的东西：

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

或者可能是：

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

如何正确做到？

更新：是的，我当然可以做到

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

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

添加一个非同构函数来做这个可能是另一种选择：

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

Answer 4

分成几部分。

内联：

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

OR：通过复合函数：

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

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

Answer 5

这种简单的方法 v-on：click =“firstFunction（）; secondFunction（）;”

Answer 6

如果您希望阅读更多内容，可以尝试以下操作：

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

对我来说，这种解决方案让您感到更像Vue一样希望

Answer 7

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 8

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

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

Answer 9

在Vue 2.5.1中按钮的工作原理

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

Answer 10

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

Answer 11

我要补充一点，您还可以使用；通过与;分开来调用多个emit或方法，或同时调用这两者。分号

  @click="method1(); $emit('emit1'); $emit('emit2');"

Answer 12

但是，你可以这样做：

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

是的，通过使用原生的onclick html事件。

Answer 13

您可以使用此：

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

Answer 14

你可以这样做

<button v-on:click="Function1(); Function2();"></button>

或

<button @click="Function1(); Function2();"></button>

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

14 个答案:

分成几部分。

内联：

OR：通过复合函数：