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
Custom class with getters and setters as data in VM #2718
Comments
data must be a plain object, you are giving it a class. its explained here in the docs. recommended reading. |
All prototype methods are ignored. Using non-plain objects as state is a rabbit hole to complexity and it is not supported by design. |
@jonagoldman , thanks, I read that I has asked this question, because this example works fine. Summary:
<input v-model="symbol" type="checkbox" />
<input v-model="test" type="checkbox" /> new Vue({
el: '#app',
data: obj
})
<input v-model="bar.symbol" type="checkbox" />
<input v-model="bar.test" type="checkbox" /> new Vue({
el: '#app',
data: {
bar: obj
}
}) |
you will see that the getter is not reactive. |
hmm, exactly |
Sorry to revive an old issue - I couldn't find any relevant discussion of this elsewhere. Does the fact a VM's Thanks for creating a reactive view library that can be used progressively instead of taking over your app, by the way. |
hmm, interesting to read about this limitation. For me, a class with custom getters is equivalent to computed properties in Vue, the only difference is that I handle the computed properties somewhere else. I agree this can increase side effects and add complex edge cases, but that could be left to the user, after all, Vue is supposed to be un-opinionated, but by making this somewhat artificial limitation it is in fact imposing an opinion which in some cases it is not trivial to work around. |
This works fine for me. It just can't be the root data object. Plus you will want to store the original reference to your class instance object. Vue will call the getters and setters every time. |
yeah, reactivity is tricky, probably better to have a limitation than a more complex codebase. Despite inconveniences there are always workarounds, so I take back my previous comment :). |
Hello. It is 2020 now and still there is nothing about #2718 (comment) in documentation. Maybe I missed it? In other case it looks like vue user must read not only documentation but also all yyx990803 comments throughout the internet. |
https://vuejs.org/v2/api/#data
It's in bold even. My comment from 2018 (over two years ago) is still valid, it's possible to use class instances, they just can't be the root data object. Using a class instance within data is not a good idea though, and so it is rightfully not documented. Keep your data model and your view model separated, they are different concerns. |
Yup, is very clear in the docs as I pointed out in my 2016 comment. |
Thank you for pointing out. I haven't looked in this section. Was thinking that API is just a reference (signatures and so on) and all the details are containing in the "guide". |
Hi
I try to use my own class as data in VM with getters and setters but it does not works. It is correct behavior?
Example https://jsfiddle.net/okv0rgrk/3019/
Thanks.
The text was updated successfully, but these errors were encountered: