Comment appeler plusieurs fonctions avec v-on: cliquez
Comment appeler plusieurs fonctions dans un seul événement v-on?
Pas de différence: cliquez, focus ou quoi que ce soit?
Quelque Chose comme:
<div v-on:click="fn1('foo');fn2('bar')"> </div>
Ou peut-être:
<div v-on:click="fn1('foo')"
v-on:click="fn2('bar')"> </div>
Comment le faire?
Mise à JOUR: Oui, bien sûr, je peux toujours faire
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
Mais c'est vraiment moche.
8 réponses
Tout d'abord, vous pouvez utiliser la notation courte @click au lieu de v-on:click à des fins 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, si vous vous retrouvez avec 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>
Je suis sur vue 2.3 et je peux le faire:
<div v-on:click="firstFunction(); secondFunction();"></div>
Pour ajouter une fonction anomymous pour faire cela peut être une alternative:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
Séparer en morceaux.
En Ligne:
<div @click="f1() + f2()"></div>
Ou: par une fonction composite:
<div @click="f3()"></div>
<script>
var app = new Vue({
// ...
methods: {
f3: function() { f1() + f2(); }
f1: function() {},
f2: function() {}
}
})
</script>
La gestion des événements Vue ne permet que des appels de fonction uniques. Si vous devez 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');
}
Modifier
Une autre option consiste à modifier le premier gestionnaire pour avoir un rappel et passer le second.
<div @click="fn1('foo', fn2)"></div>
////////////////////////////////////
fn1: function(value, callback) {
console.log(value);
callback('bar');
},
fn2: function(value) {
console.log(value);
}
Cette façon simple de faire v-sur:click="firstFunction(); secondFunction();"
Html:
<div id="example">
<button v-on:click="multiple">Multiple</button>
</div>
JS:
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// define methods under the `methods` object
methods: {
multiple: function (event) {
this.first()
this.second()
}
first: function (event) {
//yourstuff
}
second: function (event) {
//yourstuff
}
}
})
vm.multiple()
Vous pouvez, cependant, faire quelque chose comme ceci :
<div onclick="return function()
{console.log('yaay, another onclick event!')}()"
@click="defaultFunction"></div>
Oui, en utilisant un événement HTML onclick natif.