Comment appeler plusieurs fonctions avec @click dans Vue ?

Question

Question :

Comment appeler plusieurs fonctions en un seul @click ? (alias v-on:click ) ?

J'ai essayé

• Divisez les fonctions avec un point-virgule : <div @click="fn1('foo');fn2('bar')"> </div> ;

• Utilisez plusieurs @click : <div @click="fn1('foo')" @click="fn2('bar')"> </div> ;

mais comment le faire correctement ?

P.S. : Bien sûr, je peux toujours le faire

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

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

Mais parfois, ce n'est pas agréable.

Answer 1

Avec Vue 2.3 et plus, vous pouvez le faire :

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

Answer 2

Tout d'abord, vous pouvez utiliser la notation courte @click au lieu de v-on:click pour des raisons de lisibilité.

Deuxièmement, vous pouvez utiliser un gestionnaire d'événement de clic qui appelle d'autres fonctions/méthodes comme @Tushar l'a mentionné dans son commentaire ci-dessus, de sorte que vous obtenez quelque chose comme ceci :

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

Answer 3

Ajouter une fonction anormale pour faire cela peut être une alternative :

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

Answer 4

Séparer en morceaux.

En ligne :

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

OU : par le biais d'une fonction composite :

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

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

Answer 5

El Vue Le traitement des événements ne permet que des appels à une seule fonction. Si vous avez besoin d'en faire plusieurs, vous pouvez soit faire un wrapper qui inclut les deux :

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

EDIT

Une autre option consiste à modifier le premier gestionnaire pour qu'il ait une fonction de rappel et à lui passer le second.

<div @click="fn1('foo', fn2)"></div>
////////////////////////////////////
fn1: function(value, callback) {
    console.log(value);
    callback('bar');
},
fn2: function(value) {
    console.log(value);
}