Skip to content
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

Closed
nervgh opened this issue Apr 24, 2016 · 13 comments
Closed

Custom class with getters and setters as data in VM #2718

nervgh opened this issue Apr 24, 2016 · 13 comments

Comments

@nervgh
Copy link
Contributor

@nervgh nervgh commented Apr 24, 2016

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.

@jonagoldman
Copy link

@jonagoldman jonagoldman commented Apr 24, 2016

data must be a plain object, you are giving it a class. its explained here in the docs. recommended reading.

@yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Apr 24, 2016

All prototype methods are ignored. Using non-plain objects as state is a rabbit hole to complexity and it is not supported by design.

@yyx990803 yyx990803 closed this Apr 24, 2016
@nervgh
Copy link
Contributor Author

@nervgh nervgh commented Apr 24, 2016

@jonagoldman , thanks, I read that
@yyx990803 , thanks

I has asked this question, because this example works fine.

Summary:

  • not works
<input v-model="symbol" type="checkbox" />
<input v-model="test" type="checkbox" />
new Vue({
    el: '#app',
    data: obj
})
  • works
<input v-model="bar.symbol" type="checkbox" />
<input v-model="bar.test" type="checkbox" />
new Vue({
    el: '#app',
    data: {
        bar: obj
    }
})
@yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Apr 24, 2016

you will see that the getter is not reactive.

@nervgh
Copy link
Contributor Author

@nervgh nervgh commented Apr 24, 2016

hmm, exactly 😢

@milaniliev
Copy link

@milaniliev milaniliev commented Jan 12, 2018

Sorry to revive an old issue - I couldn't find any relevant discussion of this elsewhere.
@yyx990803, I encounter this problem when trying to separate my presentation logic (in the Vue VM) from the client-side business rules and persistence code (in a model). Having my model be a class instance is pretty natural.

Does the fact a VM's data attributes not support class instances mean a Vue VM instance is intended to contain presentation, business and persistence logic? Or is there some other pattern I haven't considered?

Thanks for creating a reactive view library that can be used progressively instead of taking over your app, by the way.

@manast
Copy link

@manast manast commented Apr 5, 2018

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.

@sirlancelot
Copy link
Contributor

@sirlancelot sirlancelot commented Apr 6, 2018

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.

@manast
Copy link

@manast manast commented Apr 6, 2018

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 :).

@Feofilakt
Copy link

@Feofilakt Feofilakt commented Aug 20, 2020

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.

@sirlancelot
Copy link
Contributor

@sirlancelot sirlancelot commented Aug 20, 2020

https://vuejs.org/v2/api/#data

The object must be plain

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.

@jonagoldman
Copy link

@jonagoldman jonagoldman commented Aug 20, 2020

Yup, is very clear in the docs as I pointed out in my 2016 comment.

@Feofilakt
Copy link

@Feofilakt Feofilakt commented Aug 21, 2020

It's in bold even.

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".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.