Vue: [Suggestion] Wrapped "v-on" invokers should return internal result

[cypherix93]

What problem does this feature solve?

I am trying to implement a "loading button" component that internally keeps track of specified event handlers and changes state based on the resolution state of said handlers. Assuming that the event handler is a function that returns a Promise, the button internally waits for the promise to resolve, shows loading state, and handles the resolve / reject accordingly.

Approach

Inside the PromiseButton component, I am keeping track of the event handler that is passed in (let's say we only want to look for 'click' handlers).

this.handlerFunc = this.$listeners['click']

Inside the event handler of the internal button, I am wrapping this function, and change state something like:

this.isLoading = true;

await this.handlerFunc();

this.isLoading = false;

And in the consumer I am using the @click binding like so:

<promise-button type="button" class="..." @click="someHandler">

All this is fine and works as expected.

Problem

However, when I try to use the same component but I use an inline method handler (with an optional parameter):

<promise-button type="button" class="..." @click="someHandler(...)">

Somehow I lose context of the Promise being returned. It was a curious issue, so I dug a bit deeper and I found the pain point to be inside the wrapper function of the inline handler:

function($event) {
  someHandler(...) <---
}

It's not returning the Promise returned by my someHandler.

What does the proposed API look like?

My suggestion is that it should return the result of the internal handler really, that's all. That way, regardless of how the handler is written, I can get context internally of what the result of the handler was.

It also makes sense to me that it wouldn't just swallow the returned value of the wrapped function:

function($event) {
  return someHandler(...)
  ^^^^^^
}

I am thinking this should solve the problem I am having. Please advise if I am wrong regarding this, or I should take a different approach.

Thanks for your time.

P.S. I didn't get time yet to dive into the source of Vue, but I plan to do that, and fine the actual source of this problem in the code.

[coolzjy]

See https://github.com/vuejs/vue/pull/7465

[cypherix93]

@coolzjy Thanks for the response, but I think my issue is not regarding $emit (unless I am failing to see the connecting dots). I agree with the comments in #7465 and don't want $emit to propagate up the return values.

I am just saying that the expected return value for handlers in

@click="doStuff"

and

@click="doStuff(someParam)"

should be exactly what the method doStuff returns. It is unexpected and not apparent to me that doStuff when called as an inline handler won't return the same result (in my case specifically, a Promise).

[LinusBorg]

I think this makes sense. The behaviour should be consistent.

[davidmdem]

Thank you for this suggestion!

I'm making a similar control and have spent all morning trying to figure out why I couldn't await an async event handler from $listeners. Refactoring from @click="doStuff(x)" to @click="doStuff" gets the desired behavior.

[tianjianchn]

@cypherix93 I'm facing the same problem, sorry for late to find your issue.
Currently, I changed the code in https://github.com/vuejs/vue/blob/76fd45c9fd611fecfa79997706a5d218de206b68/src/compiler/codegen/events.js#L104
to

return `function($event){return ${handler.value}}` // inline statement

and same for the modifier one below https://github.com/vuejs/vue/blob/76fd45c9fd611fecfa79997706a5d218de206b68/src/compiler/codegen/events.js#L139

I love javascript because it is so easy to quickly feature the open source code and change it for my usage

[yyx990803]

Closed via 0ebb0f39