Vue: Two-way binded computed property on component
I believe I've found a bug regarding two-way sync and computed properties.
Either that or I'm doing something wrong.
Below I've filled out the bug report template.
I've isolated the behaviour from my original code, so this is a simplified version of what's happening.
In my project's code the computed property code is more complicated, but the results are the same.
Vue.js version
1.0.24
Reproduction Link
https://jsfiddle.net/vvLgdezu/4/
Steps to reproduce
See jsFiddle
What is Expected?
I would expect the computed property on the child component (sync-test) to by synced immediately to the parent.
What is actually happening?
The child component does not sync back before the initial data is changed.
henninghorn
All 4 comments
In your code, theResult is both a computed property and component prop. I don't know how the code actually works without throwing an error, but it is, without a doubt, _very wrong_ way of doing it.
the component props are for taking data from parent to child.But int his case if the parent updates its theResult , then child's theResult will not be updated because child's theResult is a computed property.
What you want is best accomplished using v-ref and computed property on parent like this https://jsfiddle.net/vvLgdezu/10/
This approach makes parent's theResult a computed property (which it is) and defines the property as child's theResult.
prog-rajkamal
on 24 May 2016
Computed properties are read-only, which should never be used as a two-way prop.
Probably should give a warning /raise an error if computed properties are used as two-way prop or v-model.
fnlctrl
on 24 May 2016
As mentioned before, you can't have the same field as prop and as computed property.
As to what you are trying to achieve, I would not recommend the approach of calculating data in child and passing it up to parent. Make parent responsible for calculating the data, and use children just to display it.
@fnlctrl there are computed properties with getters/setters, and it's perfectly valid to use those in v-model, or to pass them down as sync prop.
simplesmiler
on 24 May 2016
@simplesmiler Thanks! Didn't know that before
fnlctrl
on 24 May 2016
Related issues
loki0609
·
3Comments
aviggngyv
·
3Comments
lmnsg
·
3Comments
bfis
·
3Comments
wufeng87
·
3Comments
Most helpful comment
As mentioned before, you can't have the same field as prop and as computed property.
As to what you are trying to achieve, I would not recommend the approach of calculating data in child and passing it up to parent. Make parent responsible for calculating the data, and use children just to display it.
@fnlctrl there are computed properties with getters/setters, and it's perfectly valid to use those in
v-model, or to pass them down as sync prop.