Reactivity using this.$set() with an object not working, but works with an array?

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SonarLint - Clean code begins in your IDE with SonarLint
  • - Download’s Tech Salary Report
  • Scout APM - Truly a developer’s best friend
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    Vue makes result your data() function reactive. So this.reactiveObj (which is set to null) property will be reactive. Then, in mounted(), you assign that property to something else (empty object {}). That signals vue that it needs to rerender that template block {{ reactiveObj }}. But it doesn't rerender immediately. It does so sometime after mounted() has completed. By that time reactiveObj already has some non-reactive properties in it so it happily rerenders it with whatever non-reactive content it has. After that in your button click handler you modify values of those non-reactive properties. And vue doesn't pick up that. Whether you do this with this.reactiveObj[id] = true or this.$set(this.reactiveObj, id, true) does not matter because if you look at Vue.set (or this.$set) source code here (find export function set(...) you'll see

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts