CODEWITHSUNDEEP
vue.jsvuejs2
Kenstk8
Kenstk8

Reputation: 35

Vue: replacing data object entierly?

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;
   }
}

Upvotes: 0

Views: 115

Answers (1)

Eduardo Sousa
Eduardo Sousa

Reputation: 1075

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

Upvotes: 1

Related Questions