Frage:

Wie rufe ich mehrere Funktionen mit einem Klick auf? (aka v-on:click)?

Ich habe es versucht

• Funktionen mit einem Semikolon teilen : <div @click="fn1('foo');fn2('bar')"> </div>;

• Verwenden Sie mehrere @click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>;

aber wie geht das richtig?

PS : Natürlich kann ich das immer

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

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

Aber manchmal ist das nicht schön.

Ab Vue 2.3 können Sie Folgendes tun:

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

Zunächst können Sie die Kurznotation @clickanstelle der v-on:clickLesbarkeit verwenden.

Zweitens können Sie einen Klickereignishandler verwenden, der andere Funktionen / Methoden wie @Tushar aufruft, die in seinem obigen Kommentar erwähnt wurden, sodass Sie am Ende Folgendes erhalten:

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

Wenn Sie etwas besser lesbares möchten, können Sie Folgendes versuchen:

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

Für mich ist diese Lösung eher eine Vue-ähnliche Hoffnung, die Sie genießen

eine anomymische Funktion hinzuzufügen, um dies zu tun, kann eine Alternative sein:

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

In Stücke trennen.

In der Reihe:

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

ODER: Durch eine zusammengesetzte Funktion:

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

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

Diese einfache Möglichkeit, v-on auszuführen: click = "firstFunction (); secondFunction ();"

Dies funktioniert bei mir, wenn Sie ein anderes Dialogfeld öffnen müssen, indem Sie auf eine Schaltfläche in einem Dialogfeld klicken und dieses auch schließen. Übergeben Sie die Werte als Parameter mit einem Komma-Trennzeichen.

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

in Vue 2.5.1 für Button funktioniert

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

Die VueEreignisbehandlung ermöglicht nur einzelne Funktionsaufrufe. Wenn Sie mehrere ausführen müssen, können Sie entweder einen Wrapper erstellen, der beide enthält:

<div @click="handler"></div>
////////////////////////////
handler: function() { //Syntax assuming its in the 'methods' option of Vue instance
    fn1('foo');
    fn2('bar');
}

BEARBEITEN

Eine andere Möglichkeit besteht darin, den ersten Handler zu bearbeiten, um einen Rückruf zu erhalten, und den zweiten zu übergeben.

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

Ich möchte hinzufügen, dass Sie dies auch verwenden können, um mehrere Emits oder Methoden oder beides zusammen aufzurufen, indem Sie mit trennen. Semikolon

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

Sie können jedoch Folgendes tun:

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

Ja, mithilfe des nativen HTML-Ereignisses onclick.