Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vuejs/vue/issues/7628 below:

[Suggestion] Wrapped "v-on" invokers should return internal result · Issue #7628 · vuejs/vue · GitHub

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.

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.

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.

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.

LinusBorg, davidmdem, tianjianchn, Elimor5 and nachodd

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4