Function parameters

[clnt]

I am opening this because it is still an issue like reported in #2 - however it looks like there is no activity on that issue.

vue-promise-btn does not like function arguments at all, I want to be able to pass my vee-validate scope directly into the method rather than having to define an additional data property.

Here is a link to the issue reproduced in CodeSandbox, I also included your suggestion from issue #2 which does not work either.

https://codesandbox.io/s/6w4vp0n1l3

[clwilliams]

Just installed this component this morning and this is exactly why it's not working for us too!

[STUkh]

Thanks for feedback. Will look into in start of next week. PRs also welcome.

[STUkh]

@clnt , @clwilliams just published v1.2.0 - should work right now and fix #2 and #4

(added) ^ statement not totally correct. I see difference between interpolations:
All expressions in codesandbox transpiled like:

on:{"click":function($event){_vm.asyncActionWithArgs($event, 'abc')}

But my example transpiled like:

on:{"click":function($event){return asyncActionWithArgs($event, 'abc')}

I believe problem could be the same as for event modifiers and only PR to Vue can resolve this transpilation question. I'll try to find another way to handle this situations (probably will change syntax slightly). Also this can be good point to rethink logic and rewrite plugin to support specific components like b-btn.

[timberkeley]

Could this issue be related to vuejs/vue#7628?

[STUkh]

@timberkeley you're right.
Also what we can see: runtime and compile time results behave different.
In my example you can see that new "Btn with expression on click handler" button work as expected, when the same code in codesandbox will trigger only first class citizen function on each click and not it's result.
I want to add alternate syntax like: vue-promise-btn={ promise: dataPromiseObj }
This can solve problem usage with 3rd party plugins/components/directives and unbind us from return value. Only one inconvenience - we will have to create objects for this promises in model and invent names for them, but i believe it not so hard :)

[STUkh]

@clnt , @clwilliams , @timberkeley - Just released v2.0.0 with extended mode. Everything should work fine.
Also i recommend you to check your template compilers, it could affect significantly to template results. Tried with Vue-CLI 3 - everything was good, anyway with extended mode all should be perfect.

[STUkh]

Finally i can give you proper answer for main question:
To use closure you have to define your event handlers with an object

<button v-promise-btn v-on="{ click: test('test') }">

instead of

<button v-promise-btn @click="test('test')">

Working example as answer for start post: https://codesandbox.io/s/yql5757jl9

[clnt]

@STUkh Hey, sorry I've been a bit inactive on here lately. Awesome news! thanks for getting to the bottom of this :)

[clwilliams]

We want to use this component in a basket page on a commerce platform, where each item in the basket has a remove button. However, upon loading the basket page, all items that were in the basket suddenly disappear as the delete action is triggered for every row upon render of the page; I changed as per the advice to v-on="{ click: $emit('remove') }" instead of v-on:click="$emit('remove')"