Vue $set: Adding Reactive Properties

In Vue, when you need to add a new property to a reactive object, if you directly use the assignment operator (like this.someProperty = someValue), Vue cannot detect the changes in this property, which would make it unresponsive. To solve this issue, you can use the this.$set method to add a new property and ensure that it is reactive.

The usage of the this.$set method is as follows:

this.$set(obj, propertyName, value)
  1. obj: Object to which properties should be added
  2. propertyName: The name of the property to be added.
  3. value: the value of the property to be added

For example, if you want to add a new property called newProperty to the data object in a Vue component, you can use the this.$set method like this:

this.$set(this.$data, 'newProperty', someValue)

This ensures that the newProperty attribute is reactive and can be watched and updated by Vue.

bannerAds