When experimenting with a bit of fancy syntax in my templates today I came across a confusing behaviour of the bind() function in Vue event handlers.
Ignoring any possibly bad practices and the fact that the bind is completely pointless here, please look at the following 2 code samples.
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>
Code sample 1 properly logs an output to the console when clicking the button, but for some reason sample 2 doesn't log anything. Why?
myFunc.bind() in Sample 2 returns the reference to new function, but does not call it.
To make it work as expected, myFunc.bind()() is required.
<template>
<button @click="myFunc.bind()()"></button>
</template>