Custom class with getters and setters as data in VM

[nervgh]

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]

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

[yyx990803]

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

[nervgh]

@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]

you will see that the getter is not reactive.

[nervgh]

hmm, exactly 😢

[milaniliev]

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]

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]

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]

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]

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]

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]

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

[Feofilakt]

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