Example code for using $set in Vue

Vue —$set

In the process of using vue for development, we may encounter a situation: when a vue instance is generated, when the data is assigned again, it is sometimes not automatically updated to the view;

When we look at the vue document, we will find a sentence: if new attributes are added to the instance after the instance is created, it will not trigger view update.

The following code adds a age attribute to the student object

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ——Hook function, after the instance is mounted   = 24
}

The reason is: Due to ES5 restrictions, the addition or deletion of object properties cannot be detected. Because the property is converted to a getter/setter when initializing the instance, the property must be on the data object to convert it to make it responsive.

To handle this situation, we can use the $set() method, which can both add properties and trigger view updates.

However, it is worth noting that there are some problems with the usage of $set() written in some online materials, which leads to some detours when you are new to this method!

Wrong writing method:this.$set(key,value)(ps: Maybe it's the writing method of vue1.0)

mounted () {
  this.$set(, 24)
}

Correct writing:this.$set(,”key”,value')

mounted () {
  this.$set(,"age", 24)
}

Summarize

The above is the use of $set in Vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!