Wie rufe ich mehrere Funktionen mit @click in vue auf?

98

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.

Sergei Panfilov
quelle
10
Erstellen Sie einen Single-Click-Handler und rufen Sie dabei zwei Funktionen auf.
Tushar
3
Ja, ich kann das, aber ich bin ein bisschen hässlich.
Sergei Panfilov
1
Fügen Sie dazu eine anomymische Funktion hinzu: <div v-on: click = "return function () {fn1 ('foo'); fn2 ('bar');} ()"> </ div>
Wolfgang
@ Wolfgang Füge dies als Antwort hinzu (dies ist endlich eine alternative Lösung).
Sergei Panfilov
1
Hier ist meiner Meinung nach etwas besser lesbares, Sie können dies tun : v-on:click="[click1($event), click2($event)]". Ich habe es unten beantwortet :)
Shailen Naidoo

Antworten:

236

Ab Vue 2.3 können Sie Folgendes tun:

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>
Stuart Cusack
quelle
2
Cool. Ich denke das muss neu für 2.3 sein? Funktioniert bei 2.2.6 für mich nicht. Guter Grund für ein Upgrade, wenn ja.
RoccoB
dies versucht und ging mit den schlichteren Antworten , weil ich nicht vorstellen konnte , wie passieren eventdurch
Pirijan
4
Interessanterweise muss die Klammer im Funktionsnamen funktionieren. v-on:click="firstFunction; secondFunction;"wird nicht funktionieren
Andre Ravazzi
2
@ Pirijan Es ist gebunden an$event
Michael Mrozek
1
@ Pirijan <div @click="firstFunction($event); secondFunction($event);Et voilà :)
rdhainaut
44

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>
ismnoiet
quelle
13

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

Shailen Naidoo
quelle
Dies scheint die idiomatischste Lösung zu sein. Gibt es irgendwelche Nachteile?
Kiraa
1
@Kiraa Nein, nicht das ich gefunden habe, seit ich diese Syntax herausgefunden habe. Wenn ich auf etwas
stoße
1
Wie, wenn Sie e.stopPropagate()auf die click1($event)so wollen, dass click2(event)nicht behandelt werden?
Julio Motol
1
@ JulioMotol click1($event)und click2($event)sind nur 2 verschiedene Funktionen für das gleiche Ereignis, nicht 2 verschiedene Ereignisse. e.stopPropagate()wird nichts tun für click2(). Hoffe das macht Sinn :)
Shailen Naidoo
Es gibt also keine Möglichkeit, das click2($event)Auslösen zu stoppen ?
Julio Motol
11

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

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div> 
Wolfgang
quelle
10
Eine ES6-Alternative: @click = "() => {function1 (Parameter); function2 (Parameter);}"
AdamJB
9

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>
Inanc Gumus
quelle
9

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

Herr Niemand
quelle
2
Ich glaube, dies wird den Compiler brechen und nicht rendern. Ich habe es einfach versucht - bin pleite.
Chris Johnson
Ich kann unten sehen, dass es für einige funktioniert, aber in 2.6.6 für mich bricht.
Chris Johnson
7

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>
user2841183
quelle
5

in Vue 2.5.1 für Button funktioniert

 <button @click="firstFunction(); secondFunction();">Ok</button>
Zhurov Konstantin
quelle
4

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);
}
m_callens
quelle
2

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()
RaV
quelle
1

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');"
Jewcub
quelle
-2

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.

Ardhi
quelle