vue3: How to make one attribute of an external object reactive?

Viewed 400

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)?

0 Answers
Related