I have been looking for an elegant solution to this problem for a long time.
MyClass.js
class MyClass {
// public
isReady = false
isLoading = false
isProcessing = false
// private
__source
__buffer
#otherPrivateVar
// a lot of other stuff ...
}
I want to make only some instance attributes reactive and use them in a component.
In Vue2 I use the private class attributes
MyClass
// few public vars
isReady = false
// all other is private to hide it from vue reactivity
#source
#buffer
}
and use it in component like this
<template>
...
<div v-if="myVariable.isReady">Ready to go</div>
<div>wait a second ...</div>
...
</template>
export default {
// ...
data () {
return {
myVariable: new MyClass()
}
}
// ...
}
I'm not sure if this is a good solution but it works with Vue2. In Vue3 I can't do this because it's using a Proxy and I'm getting the error:
AudioFile.js:131 TypeError: attempted to set private field on non-instance
at _classPrivateFieldSet (classPrivateFieldSet.js:7)
So what's the best way to react when my object changes in Vue 3 (without using callbacks or making the whole object reactive without private attributes)?