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

Lesezeit: 4 Minuten

Benutzeravatar von Sergei Panfilov
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?

Benutzeravatar von Stuart Cusack
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

Benutzeravatar von ismnoiet
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

Benutzeravatar von Shailen Naidoo
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

Benutzeravatar von Inanc Gumus
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

Benutzeravatar von Herrn Nobody
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

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

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy