Comments (9)
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
from vue-promise-btn.
Just installed this component this morning and this is exactly why it's not working for us too!
from vue-promise-btn.
Thanks for feedback. Will look into in start of next week. PRs also welcome.
from vue-promise-btn.
@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.
from vue-promise-btn.
Could this issue be related to vuejs/vue#7628?
from vue-promise-btn.
@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 :)
from vue-promise-btn.
@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.
from vue-promise-btn.
@STUkh Hey, sorry I've been a bit inactive on here lately. Awesome news! thanks for getting to the bottom of this :)
from vue-promise-btn.
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')"
from vue-promise-btn.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-promise-btn.