This article was originally published athttps://www.telerik.com/blogs/so-what-actually-is-vue-set

Talking aboutVue.set is talking about reactivity, so prepare yourself for some theory on this one. However, as always, it doesn't need to be something hard or boring. Find your avocados and chips, make some guacamole, and let's dip right in.

Data and Reactivity

Whenever you create adata() property function inside a Vue component, and return the object back, Vue does a lot of things behind the scenes to hook everything up inside your component and to make it reactive.

exportdefault{data(){return{red:'hot',chili:'peppers'}}}

The first thing that Vue will do here with our awesome awesome awesome RHCP data, is walk through each of theproperties of thereturn { } object, and create a uniquegetter andsetter for each one. The nitty gritty of how this actually happens is beyond the scope of this article, butVue Mastery has a very nice video explaining this in detail.

The purpose of creating these is so that when you access these properties inside your code, by doingthis.red for example, or when setting them withthis.red = "hotter" you are actually calling thesegetters andsetters that Vue created for you.

Inside this magical land of SETGET, Vue hooks up your computer properties, watchers, props, data, etc. to becomereactive, in super simple terms, a function is called that updates the whole shebang every time the setter is changed.

The pitfall

Awesome! This is what we love about Vue right, its amazing reactivity and under-the-hood power. But there is a dark side here that needs to explored.

Let's change our data a little bit and see what happens when we start trying to work with dynamic data.

data(){return{members:{}}}

Alright, nothing fancy so far, we have amembers property of our data into which we want to add band member information. Now for the sake of example, let's add a method that will pretend to pull some information from a remote http call, that will give us back a JSON object with the band info.

data(){return{members:{}}},methods:{getMembers(){constnewMember={name:'Flea',instrument:'Bass',baeLevel:'A++'};// Some magical method that gives us data got us this sweet info// ...}}

Hm. Ok, so looking at this example let's stop and think. There are many ways to resolve this current dilema, how do we add thisnewMember object into our currentmembers property?

Maybe you're thinking let's turnmembers into an array andpush it, sure, but that's cheating because it breaks my CAREFULLY constructed example that I didn't just make up as I was typing this.

In this scenario, we NEED to havemembers as an object. Ok, simple - you'd say, let's just add a new property to themembers property, it's an object after all. In fact, let's go ahead and make the member's name the name of the property.

getMembers(){constnewMember={name:'Flea',instrument:'Bass',baeLevel:'A++'// Totally important property that we will never use};// Some magical method that gives us data got us this sweet infothis.members[newMember.name]=newMember;}

Lok'tar Ogar!

Except, no, because A. this is not Orgrimmar and B. we now have a problem.

If you were to run this code on your browser and test it right now, you will see that you are actually pushing this new data into themembers data, but this change to the component state will not actually make any of your application re-render.

In a scenario where you are just using this data for some computation, or for some type of internal storage then doing things this way won't impact your application - however, and this is a huge HOWEVER, if you are using this data reactively on your app to display some information on your page, or for conditional rendering withv-if orv-else then things are going to get funky.

Actually using Vue.set

So now that we understand where the problem is actually coming from, we can learn what is the proper solution. Allow me to introduce you toVue.set.

Vue.set is a tool that allows us to add a new property to an already reactive object, and makes sure that this new property is ALSO reactive. This completely takes care of the problem that we were experiencing on the other example, because when our new property onmembers gets set, it will automatically be hooked into Vue's reactivity system, with all the cool getters/setters and Vue-magic behind the scenes.

A small note is however required to understand how this affects arrays. So far we have only really played around with objects, which are super easy to understand. New prop? Add it with Vue.set if you want it to be reactive. Simple.

Following up with our example, let's switch things up to useVue.set instead.

getMembers(){constnewMember={name:'Flea',instrument:'Bass',baeLevel:'A++'};// Some magical method that gives us data got us this sweet info//this.members[newMember.name] = newMember;this.$set(this.members,newMember.name,newMember);}

This bit is newthis.$set(this.members, newMember.name, newMember);

There's two things I want to mention for this piece of code. I've been telling you so far thatVue.set is how we are going to be doing things, but now im usingthis.$set, but fear not - this is only an alias, so it will do and behave in the exact same way. The cool thing, is that you don't have to import Vue inside your components to use it.

The second thing I want to make note of is the syntax of this function. It takes three paramters, theobject orarray which we are going to modify (in this casethis.members).

A second paramter which points to theproperty orkey of the first object/array that we passed (sonewMember.name because we want it to be dynamic).

And finally a third paramter which is the value we want to set into it. (In our case,newMember).

this.members[newMember.name]=newMember;//            V               V              Vthis.$set(this.members,newMember.name,newMember);

(PS. My ASCII skills are not for sale ^)

But what's up with array reactivity?

When we create anarray inside the initial state, Vue sets it up to be reactive for us, however Vue is unable to currently detect when you directly assign a value using an index. For example, if we were doing this:

this.membersArray[3]=myNewValue;

Then Vue won't be able to detect this change, and thus it would not be reactive. Please keep in mind that if you modify arrays with operations likepop,splice,push then those operations WILL trigger reactivity on the arrays, so you can safely use those.

In the off case that you need to set an index value directly, we haveVue.set to help us out. Let's see how that would look on our previous example.

this.$set(this.membersArray,3,myNewValue)

If you want to read more about all the reactivity caveats check out thislink to the official documentation

Vue 3.0

This is all still subject to change at the time of this writing, but the word on the street is that these caveats will no longer be an issue. In other words, in Vue 3.0 you will be safe to forget about these edge cases completely, with the exception of those poor souls that still have to target some old browsers that will not fully support the new reactivity system.