template doesn't call returned function. why?

[modelair]

<script lang="ts" setup>
function go2(message: string) {
  return (e: Event) => console.log('event & message', e, message)
}
function go(e: Event) {
   console.log('event', e)
}

</script>
<template>
  <button @click="go">1</button>
  <button @click="go2('hello')">2</button>
  <button @click="e => go2('hello')(e)">3</button>
</template>

play.vuejs.org

Hello. Why second button doesn't call returned function? it's a bug or a feature?
i guess it does
of course i saw what happens in rendered code. but why?

_createElementVNode("button", { onClick: $setup.go }, "btn"),
_createElementVNode("button", {
    onClick: _cache[0] || (_cache[0] = $event => ($setup.go2('hello')))
}, "btn"),
_createElementVNode("button", {
    onClick: _cache[1] || (_cache[1] = e => $setup.go2('hello')(e))
}, "btn")

[hubdidub]

You could interpret @click="go2('hello')" like this:
"When the button is clicked, call the go2 function with the argument 'hello'".
That was it, there are no further instructions in your code.

The return value happens to be another function, but:

• Vue can't really be sure that the return value is callable, so it would need to perform an extra check for it
• you didn't tell the program to call it

You could expect Vue to call it automatically (if it's callable), but that would be a strange behavior, because:

• there are scenarios where a function returns another function, but you actually don't want to call it
• what if the return value of that call is also callable? Should it also be called? (and so on).

To avoid confusion, I suggest to define the @click-handler in this case like so:

<button @click="() => go2('hello')">2</button>

to make the code reflect what's happening more clearly and to differentiate it from what is happening on button 1.

[modelair]

in vanilla js it's work as i guess.

Vue can't really be sure that the return value is callable

but vanilla onclick - can be. looks like unimplemented feature from compleTemplate

[hubdidub]

You mean outside of a Vue application, when you use the onclick attribute instead of @click?

<button onclick="myFunction">clickme</button>

no, that won't work. You have to call myFunction yourself with the parenthesis:

<button onclick="myFunction()">clickme</button>

Likewise when the function returns another function - if you want that to run as well, you have to call it yourself using another pair of parenthesis. There is no automatic function calling.

So in your example button no. 2:

<button onclick="go2('hello')">2</button>

This will run go2, but doesn't call the returned function. Neither in vanilla HTML/Javascript nor in Vue, so nothing is wrong here.

[modelair]

yeah, u're right. my mistake was in ma case: i have test it as ":onclick="fn" and it's works. but in pure js - not.

[Hetari]

The issue is that <button @click="go2('hello')">2</button> doesn’t work as expected because go2('hello') is invoked immediately when Vue renders the template.

Solution

1. Use an inline arrow function to defer execution as button 3

2. Refactor go2 to accept both parameters directly:

   function go2(e: Event, message: string) {
     console.log('event & message', e, message)
   }

   And update the template:

   <button @click="(e) => go2(e, 'hello')">2</button>

[modelair]

impossible!

[Hetari]

Based on my experience with Vue, I really see that solution 2 is the way to go

[modelair]

the question was about sugar in templates, where variant 1 and 3 are works, but 2 - not

[Hetari]

Oh... I didn’t catch your point about the template syntax, sorry for that. I don’t have any updates to share right now, but I wish you the best of luck!

[hubdidub]

Maybe the article on Event Handling in the Vue docs can help.
It describes what Vue does with this syntax@click="handler"(quoting straight from the docs):

The handler value can be one of the following:

1. Inline handlers: Inline JavaScript to be executed when the event is triggered (similar to the native onclick attribute).
2. Method handlers: A property name or path that points to a method defined on the component.

In the code you provided, the first button is clearly case 2 - you point to the function to be executed which is defined in the <script> section.
The third button is case 1, an inline handler - you specify the code to be executed inline.

Now to answer your question: The second button is not a method handler. You are not pointing to a function to be executed, you are just providing a Javascript expression there. And in that Javascript expression, you only call go2, nothing more.
It's the same mechanic as this: @click="count++" or @click="console.log('hi')"

[aniruddhaadak80]

Hi @modelair ,

In Vue, the issue here revolves around how @click="go2('hello')" is interpreted in the template. Here’s a breakdown of the behavior:

1. Button 1 (@click="go"): This button works as expected because go is directly referenced as a function, and Vue binds it to the click event.

2. Button 2 (@click="go2('hello')"): Here, Vue interprets go2('hello') as an immediate function call that returns a function (a closure) rather than calling it directly on click. In this setup, go2('hello') is only evaluated once during the component’s initial rendering and not on each click. As a result, clicking the button does nothing because the actual function isn’t invoked as part of the click event.

3. Button 3 (@click="e => go2('hello')(e)"): This works because it wraps the function within another function that gets called on each click. By using e => go2('hello')(e), we ensure that go2('hello') generates a function each time it’s invoked by passing the click event e.

Solution

To ensure that go2 is properly called each time Button 2 is clicked, you can wrap it in an arrow function, like in Button 3:

<button @click="e => go2('hello')(e)">2</button>

This approach ensures that the inner function returned by go2('hello') is invoked each time by passing the event object e.