sergei panfilov
¿Cómo puedo llamar a múltiples funciones en una sola? @click? (también conocido como v-on:click)?
Hasta ahora lo intenté
-
Dividiendo las funciones con un punto y coma:
<div @click="fn1('foo');fn2('bar')"> </div>; -
Usando varios
@click:<div @click="fn1('foo')" @click="fn2('bar')"> </div>;
y como solución alternativa, puedo simplemente crear un controlador:
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
Pero a veces esto no es agradable. ¿Cuál sería el método/sintaxis adecuado?
stuart cusack
En Vue 2.3 y superior, puede hacer esto:
<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>
-
¿Se garantiza que los métodos se ejecuten en orden?
– Andrés Marrón
18 oct 2021 a las 2:50
-
Esto produce una advertencia en Vue.js v2.6.14:
unreachable code after return statementSi eso molesta a alguien, siempre puedes intentar algo como esto:<div @click="()=>{firstFunction(); secondFunction();}"></div>–Glenn Carver
8 de abril de 2022 a las 10:04
-
No recomendado para aquellos que tienen
prettiercon"semi": falseporque eliminará el punto y coma. Recomiendo el signo más entre el nombre de las funciones.– ARNÓN
1 de junio de 2022 a las 17:01
-
Esto funciona dejando de lado las llaves de función.
()no funcionó.-Artur Muller Romanov
22 de julio de 2022 a las 13:23
-
No funciona en Vue3. useToggle no tiene valor sin una devolución de llamada
– Sándwich
hace 2 días
isnoiet
En primer lugar, puede utilizar la notación abreviada @click en lugar de v-on:click con fines de legibilidad.
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 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>
-
No es útil si usa
useToggleen@vueuse/core– Sándwich
hace 2 días
Shailen Naidoo
Si quieres algo un poco más legible, puedes probar esto:
<button @click="[click1($event), click2($event)]">
Multiple
</button>
Para mí, esta solución se siente más como Vue, espero que la disfrutes.
-
también puede hacer @click=”click1($event); click2($event)”. Aquí, el punto principal es agregar un argumento de evento explícito a la función del controlador. De esta forma, cada método obtendrá la misma carga útil o los datos del evento original. Importante para los casos en los que escucha un evento personalizado del componente secundario
– Saulio Vikerta
11 mayo 2021 a las 20:11
actualizado en diciembre de 2021
necesita separar con una coma como esta:
<button @click="open(), onConnect()">Connect Wallet</button>
agregar una función anónima para hacer eso puede ser una alternativa:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
-
Una alternativa de ES6: @click=”() => { función1(parámetros); función2(parámetros); }”
– AdamJB
28 de junio de 2017 a las 15:06
-
Nota importante: si una de sus funciones anidadas necesita
$eventcomo argumento, deberá pasarlo como un parámetro a su nueva función para que se use dentro de ella. P.ej.($event) => {func1($event); func2('x');}– zcoop98
20 ago 2020 a las 21:00
Inanc Gumus
Separar en pedazos.
En línea:
<div @click="f1() + f2()"></div>
O: A través de una función compuesta:
<div @click="f3()"></div>
<script>
var app = new Vue({
// ...
methods: {
f3: function() { f1() + f2(); }
f1: function() {},
f2: function() {}
}
})
</script>
-
Una alternativa de ES6: @click=”() => { función1(parámetros); función2(parámetros); }”
– AdamJB
28 de junio de 2017 a las 15:06
-
Nota importante: si una de sus funciones anidadas necesita
$eventcomo argumento, deberá pasarlo como un parámetro a su nueva función para que se use dentro de ella. P.ej.($event) => {func1($event); func2('x');}– zcoop98
20 ago 2020 a las 21:00
señor don nadie
Esta forma sencilla de hacer v-on:click=”firstFunction(); secondFunction();”
-
Creo que esto romperá el compilador y no se renderizará. Acabo de probarlo – se rompió.
–Chris Johnson
1 mayo 2019 a las 15:43
-
Puedo ver a continuación que funciona para algunos, pero se rompe en 2.6.6 para mí.
–Chris Johnson
1 mayo 2019 a las 15:45