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.
javascript
vue.js
Sergei Panfilov
quelle
quelle
v-on:click="[click1($event), click2($event)]"
. Ich habe es unten beantwortet :)Antworten:
Ab Vue 2.3 können Sie Folgendes tun:
quelle
event
durchv-on:click="firstFunction; secondFunction;"
wird nicht funktionieren$event
<div @click="firstFunction($event); secondFunction($event);
Et voilà :)Zunächst können Sie die Kurznotation
@click
anstelle derv-on:click
Lesbarkeit 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:
quelle
Wenn Sie etwas besser lesbares möchten, können Sie Folgendes versuchen:
Für mich ist diese Lösung eher eine Vue-ähnliche Hoffnung, die Sie genießen
quelle
e.stopPropagate()
auf dieclick1($event)
so wollen, dassclick2(event)
nicht behandelt werden?click1($event)
undclick2($event)
sind nur 2 verschiedene Funktionen für das gleiche Ereignis, nicht 2 verschiedene Ereignisse.e.stopPropagate()
wird nichts tun fürclick2()
. Hoffe das macht Sinn :)click2($event)
Auslösen zu stoppen ?eine anomymische Funktion hinzuzufügen, um dies zu tun, kann eine Alternative sein:
quelle
In Stücke trennen.
In der Reihe:
ODER: Durch eine zusammengesetzte Funktion:
quelle
Diese einfache Möglichkeit, v-on auszuführen: click = "firstFunction (); secondFunction ();"
quelle
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.
quelle
in Vue 2.5.1 für Button funktioniert
quelle
Die
Vue
Ereignisbehandlung ermöglicht nur einzelne Funktionsaufrufe. Wenn Sie mehrere ausführen müssen, können Sie entweder einen Wrapper erstellen, der beide enthält:BEARBEITEN
Eine andere Möglichkeit besteht darin, den ersten Handler zu bearbeiten, um einen Rückruf zu erhalten, und den zweiten zu übergeben.
quelle
Html:
JS:
quelle
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
quelle
Sie können jedoch Folgendes tun:
Ja, mithilfe des nativen HTML-Ereignisses onclick.
quelle