Vue: Wie rufe ich mehrere Funktionen mit @click auf?

Lesezeit: 4 Minuten

Sergei Panfilov

Wie kann ich mehrere Funktionen in einer einzigen aufrufen @click? (aka v-on:click)?

Bisher habe ich versucht

Trennen der Funktionen mit einem Semikolon: <div @click="fn1('foo');fn2('bar')"> </div>;
Mehrere verwenden @click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>;

und als Problemumgehung kann ich einfach einen Handler erstellen:

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

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

Aber manchmal ist das nicht schön. Was wäre die richtige Methode/Syntax?

Stuart Kusack

Auf Vue 2.3 und höher können Sie dies tun:

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

Werden die Methoden garantiert der Reihe nach ausgeführt?

– Andreas Braun

18. Oktober 2021 um 2:50 Uhr
Dies erzeugt eine Warnung auf Vue.js v2.6.14: unreachable code after return statement Wen das stört – man kann immer so etwas versuchen: <div @click="()=>{firstFunction(); secondFunction();}"></div>

– Glenn Carver

8. April 2022 um 10:04 Uhr
Nicht empfehlenswert für diejenigen, die haben prettier mit "semi": false weil das Semikolon entfernt wird. Ich empfehle das Pluszeichen zwischen den Namen der Funktionen.

– Arnon

1. Juni 2022 um 17:01 Uhr
Dies funktioniert, während die Funktionsklammern weggelassen werden () funktioniert nicht.

– Artur Müller Romanow

22. Juli 2022 um 13:23 Uhr
Funktioniert nicht in Vue3. useToggle ist ohne Rückruf wertlos

– Sandwich

vor 7 Stunden

ismnoiet

Zunächst einmal können Sie die Kurzschreibweise verwenden @click anstatt v-on:click aus Gründen der Lesbarkeit.

Zweitens können Sie einen Click-Event-Handler verwenden, der andere Funktionen/Methoden aufruft, wie @Tushar in seinem Kommentar oben erwähnt hat, sodass Sie am Ende so etwas erhalten:

<div id="app">
   <div @click="handler('foo','bar')">
       Hi, click me!
   </div>
</div>

<!-- link to vue.js !--> 
<script src="https://stackoverflow.com/questions/38744932/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>

Nicht hilfreich, wenn Sie verwenden useToggle in @vueuse/core

– Sandwich

vor 7 Stunden

Shailen Naidoo

Wenn Sie etwas Lesbareres wollen, können Sie Folgendes versuchen:

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

Für mich fühlt sich diese Lösung eher wie Vue an, ich hoffe, Sie genießen es

kann auch @click=”click1($event); click2($event)” tun. Hier ist der Hauptpunkt das Hinzufügen eines expliziten Ereignisarguments zur Handlerfunktion. Auf diese Weise erhält jede Methode dieselbe Nutzlast oder die ursprünglichen Ereignisdaten. Wichtig für die Fälle, in denen Sie benutzerdefinierte Ereignisse von der untergeordneten Komponente abhören

– Saulus Vikerta

11. Mai 2021 um 20:11 Uhr

aktualisiert Dezember 2021

Sie müssen mit einem Komma wie folgt trennen:

<button @click="open(), onConnect()">Connect Wallet</button>

Um eine anonyme Funktion hinzuzufügen, kann dies eine Alternative sein:

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

Eine ES6-Alternative: @click=”() => { function1(parameters); function2(parameters); }”

– AdamJB

28. Juni 2017 um 15:06 Uhr
Wichtiger Hinweis: Wenn Sie eine Ihrer verschachtelten Funktionen benötigen $event Als Argument müssen Sie es als Parameter an Ihre neue Funktion übergeben, damit es darin verwendet werden kann. Z.B. ($event) => {func1($event); func2('x');}

– zcoop98

20. August 2020 um 21:00 Uhr

Inanc Gumus

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>

Eine ES6-Alternative: @click=”() => { function1(parameters); function2(parameters); }”

– AdamJB

28. Juni 2017 um 15:06 Uhr
Wichtiger Hinweis: Wenn Sie eine Ihrer verschachtelten Funktionen benötigen $event Als Argument müssen Sie es als Parameter an Ihre neue Funktion übergeben, damit es darin verwendet werden kann. Z.B. ($event) => {func1($event); func2('x');}

– zcoop98

20. August 2020 um 21:00 Uhr

Herr Niemand

Diese einfache Methode v-on:click=”firstFunction(); secondFunction();”

Ich glaube, dies wird den Compiler beschädigen und nicht rendern. Gerade probiert – kaputt.

– Chris Johnson

1. Mai 2019 um 15:43 Uhr
Ich kann unten sehen, dass es für einige funktioniert, aber für mich in 2.6.6 bricht.

– Chris Johnson

1. Mai 2019 um 15:45 Uhr

14390900cookie-checkVue: Wie rufe ich mehrere Funktionen mit @click auf?

#Funktion #Javascript #vue.js