Al experimentar con un poco de sintaxis elegante en mis plantillas hoy, me encontré con un comportamiento confuso de la función bind() en los controladores de eventos de Vue.
Ignorando cualquier posible mala práctica y el hecho de que el enlace es completamente inútil aquí, mire los siguientes 2 ejemplos de código.
1.
<template> <button @click="(() => console.log('this gets logged')).bind()"></button> </template> <script> export default { computed: { console: () => console, }, } </script> <template> <button @click="myFunc.bind()"></button> </template> <script> export default { methods: { myFunc () { console.log("this doesn't get logged") } } } </script>El ejemplo de código 1 registra correctamente una salida en la consola al hacer clic en el botón, pero por algún motivo, el ejemplo 2 no registra nada. ¿Por qué?
myFunc.bind() en el Ejemplo 2 devuelve la referencia a la nueva función, pero no la llama.
Para que funcione como se espera, se myFunc.bind()() .
<template> <button @click="myFunc.bind()()"></button> </template>