Vue: replacing data object entierly?

Question

I know that if I want to add a property to a data object, I use Vue.set(). I did this in my created() lifecycle method ... a new field will be added to the myObject. But what about if I wanted to make an api call and completely replace the existing data object of myObject? Can I do what I am doing in updateMore() method or is there another way to handle this?

data() {
   return {
      myObject: {}
   }
},
async created() {
     let apiData = await axios.get('http://myurl.com');
     this.$set(this.myObject, 'name', apiData.name);
},
methods: {
   updateMore() {
       let moreAPIData = await axios.get('http://myurl.com');

       // will this completely override `myObject` with `moreAPIData` and still be reactive? 
       this.myObject = moreAPIData;
   }
}

According to this Vue Forum post async doesn't work with 'created()'. — Tim
– Tim, Commented Mar 2, 2021 at 4:55

tony19 · Accepted Answer · 2022-07-16 01:33:09Z

1

TL;DR:

This assignment of a new object is fine. Vue reactivity issues occurs when you add a new key to an object, because the object is the same, what changed was its content. Javascript compares objects by its address, so if I do

new MyClass() === new MyClass()

it returns false, because, even if they have the same content, they have different addresses.

To conclude, when you set a whole new object, Vue is able to track the difference, but when you change the content of one key, it can't.

Full boring text

You can read the whole documentation about reactivity in Vue here

edited Jul 16, 2022 at 1:33

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 2, 2021 at 2:49

Eduardo Sousa

1,0851 gold badge12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kenstk8 Over a year ago

Would I be able to do this this.myObject = {...moreAPIData, ...this.myObject} ...use the spread operator to set myObject to the myObject properties and moreAPIData combined?.... or is that technically considered adding a new key?

Eduardo Sousa Over a year ago

Notice that 'this.myObject' is a whole new object now, so reactivity ;) . It is also worth noting that depending on the depth of the object, spread operator might not be enough, requiring a 'deep clone' to remove the reference to nested objects.

Collectives™ on Stack Overflow

Vue: replacing data object entierly?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related