Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Suggestion] Wrapped "v-on" invokers should return internal result #7628

Closed
cypherix93 opened this issue Feb 8, 2018 · 6 comments
Closed
Projects

Comments

@cypherix93
Copy link

cypherix93 commented Feb 8, 2018

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
Copy link
Contributor

coolzjy commented Feb 9, 2018

See #7465

@cypherix93
Copy link
Author

@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
Copy link
Member

LinusBorg commented Feb 14, 2018

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

@davidmdem
Copy link

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
Copy link

@cypherix93 I'm facing the same problem, sorry for late to find your issue.
Currently, I changed the code in

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

to

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

and same for the modifier one below

: handler.value

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

@yyx990803 yyx990803 added this to Todo in 2.6 Dec 6, 2018
@yyx990803 yyx990803 moved this from Todo to In progress in 2.6 Dec 20, 2018
@yyx990803
Copy link
Member

Closed via 0ebb0f3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
2.6
  
Done
Development

No branches or pull requests

6 participants