Question:
Comment appeler plusieurs fonctions en un seul @click? (aka v-on:click
)?
j'ai essayé
Fonctions séparées par 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?
PS : c'est sûr que je peux toujours faire
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
Mais parfois ce n'est pas sympa.
javascript
vue.js
Sergueï Panfilov
la source
la source
v-on:click="[click1($event), click2($event)]"
. J'ai répondu ci-dessous :)Réponses:
Sur Vue 2.3 et au-dessus, vous pouvez faire ceci:
la source
event
traversv-on:click="firstFunction; secondFunction;"
ne fonctionnera pas$event
<div @click="firstFunction($event); secondFunction($event);
Et voilà :)Tout d'abord, vous pouvez utiliser la notation courte
@click
au lieu dev-on:click
pour des raisons de lisibilité.Deuxièmement, vous pouvez utiliser un gestionnaire d'événements click qui appelle d'autres fonctions / méthodes comme @Tushar mentionné dans son commentaire ci-dessus, vous vous retrouvez donc avec quelque chose comme ceci:
la source
Si vous voulez quelque chose d'un peu plus lisible, vous pouvez essayer ceci:
Pour moi, cette solution ressemble plus à Vue, j'espère que vous apprécierez
la source
e.stopPropagate()
sur laclick1($event)
sorte queclick2(event)
ne vais pas être manipulé?click1($event)
et neclick2($event)
sont que 2 fonctions différentes pour le même événement et non 2 événements différents.e.stopPropagate()
ne fera rien pourclick2()
. J'espère que cela a du sens :)click2($event)
de déclencher?ajouter une fonction anonyme à faire peut être une alternative:
la source
$event
un argument, vous devrez la passer en tant que paramètre à votre nouvelle fonction pour être utilisée à l'intérieur. Par exemple.($event) => {func1($event); func2('x');}
Séparez en morceaux.
En ligne:
OU: Par une fonction composite:
la source
Cette façon simple de faire v-on: click = "firstFunction (); secondFunction ();"
la source
Cela fonctionne pour moi lorsque vous devez ouvrir une autre boîte de dialogue en cliquant sur un bouton dans une boîte de dialogue et fermer celle-ci. Passez les valeurs sous forme de paramètres avec un séparateur par virgule.
la source
dans Vue 2.5.1 pour les boutons
la source
La
Vue
gestion des événements ne permet que des appels de fonction uniques. Si vous devez en faire plusieurs, vous pouvez soit créer un wrapper qui inclut les deux:ÉDITER
Une autre option consiste à modifier le premier gestionnaire pour avoir un rappel et à transmettre le second.
la source
Html:
JS:
la source
J'ajouterais que vous pouvez également l'utiliser pour appeler plusieurs émissions ou méthodes ou les deux ensemble en séparant par; point virgule
la source
vous pouvez cependant faire quelque chose comme ceci:
oui, en utilisant l'événement html onclick natif.
la source