Vue 3 reactivity not triggered from inside a class instance

by

As another answer explains, reactive creates proxy object to enable the reactivity. this in constructor refers to original MyClass instance and not a proxy, so it cannot cannot be reactive.

This indicates the probem in the code. reactive takes into account synchronous operations that occur in MyClass constructor. It’s an antipattern to perform asynchronous side effects in a constructor , the reasons include possible implications with the code that consumes such constructor.

This can be solved with:

class MyClass {
  constructor(){
    // synchronous stuff only
    this.entries = ["a"];
  }

  init() {
    // asynchronous stuff, probably return a promise
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

and

const myobject = reactive(new MyClass());
myobject.init() // `this` is a proxy inside `init`

More Related Contents:

  1. Vue.js 3 Event Bus
  2. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  3. How to use any icons with Nuxt or Vue?
  4. Add global variable in Vue.js 3
  5. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  6. What does the @ mean inside an import path?
  7. How to fix navigator / window / document is undefined in Nuxt
  8. Vue.js – How to properly watch for nested data
  9. How to watch store values from vuex?
  10. importing a package in ES6: “Failed to resolve module specifier “vue””
  11. How to format Vuetify data table date column?
  12. Passing props dynamically to dynamic component in VueJS
  13. Running an Express server middleware alongside Nuxt
  14. How can I get query parameters from a URL in Vue.js?
  15. How to load all server side data on initial vue.js / vue-router load?
  16. Vue converts input[type=number] to a string value
  17. Access vue instance/data inside filter method
  18. Vue template or render function not defined yet I am using neither?
  19. Global data with VueJs 2
  20. How to set up flexible grid in Vue Material
  21. How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?
  22. Vue: How do I call multiple functions with @click?
  23. How can I bind the html content in vuejs?
  24. Passing props with programmatic navigation Vue.js
  25. Vue.js – update router view
  26. Importing javascript file for use within vue component
  27. How to navigate using vue router from Vuex actions
  28. How to limit iteration of elements in `v-for`
  29. Property ‘XXX’ does not exist on type ‘CombinedVueInstance’
  30. Detect Back Button in Navigation Guards of Vue-Router

Leave a Comment