javascript - component - vue props default

¿Cómo llamar a múltiples funciones con @click in vue?

Question

Pregunta:

¿Cómo llamar a múltiples funciones en un solo @click? (también conocido como v-on:click )?

Lo intenté

• Funciones divididas con punto y coma: <div @click="fn1(''foo'');fn2(''bar'')"> </div> ;

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

pero como hacerlo correctamente?

PD : seguro que siempre puedo hacer

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

Pero a veces esto no es bueno.

Answer 1

Separar en pedazos.

En línea:

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

O: a través de una función compuesta:

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

Answer 2

El manejo de eventos Vue solo permite llamadas de función única. Si necesita hacer varias, puede hacer una envoltura que incluya ambas:

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>

EDITAR

Otra opción es editar el primer controlador para tener una devolución de llamada y pasar el segundo.

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

Answer 3

En primer lugar, puede usar la notación corta @click lugar de v-on:click para @click lectura.

En segundo lugar, puede usar un controlador de eventos de clic que llama a otras funciones / métodos como @Tushar mencionó en su comentario anterior, por lo que termina con algo como esto:

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

Answer 4

Esta forma simple de hacer v-on: click = "firstFunction (); secondFunction ();"

Answer 5

Esto funciona para mí cuando necesita abrir otro cuadro de diálogo haciendo clic en un botón dentro de un cuadro de diálogo y también cerrar este. Pase los valores como parámetros con un separador de coma.

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

Answer 6

Estoy en Vue 2.3 y puedo hacer esto:

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

Answer 7

HTML:

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

JS:

 <button @click="firstFunction(); secondFunction();">Ok</button>

Answer 8

Sin embargo, puedes hacer algo como esto:

<div id="example">
<button v-on:click="multiple">Multiple</button>
</div>

sí, usando el evento html onclick nativo.

Answer 9

agregar una función anónima para hacer eso puede ser una alternativa:

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

en Vue 2.5.1 para botones funciona

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