[Vuejs]-$emit object to parent component, and push to array. Objects in array continue to be reactive, why?

by

0👍

you emit unknown property, it’s a post, not posts

and learn about JS object, there are copy by reference & value

maybe you just need to update your addResume method like this

   addResume() {
      const post = JSON.parse(JSON.stringify(this.post))
      this.$emit("resumeHandler", post)
   }

0👍

It’s not the problem that the object is reactive but that it’s the same object because objects are passed by reference in JavaScript. If it’s modified in one place, it’s modified everywhere.

In order to avoid this, the object needs to be explicitly copied. For shallow object this can be done with object spread:

this.$emit("resumeHandler", {...this.post})

For deeply nested objects, multiple spreads or third-party clone function can be used.

Leave a comment