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?