JIYIK CN >

In Vue, we often need to manipulate the properties and values ​​of objects. Sometimes we need to dynamically add properties and values ​​to meet business needs. This article will introduce in detail how to dynamically add properties and values ​​to objects in Vue, and provide some precautions.

Using Vue.set Method

Vue provides a Vue.setmethod for dynamically adding properties and values ​​to objects. Vue.setThe method receives three parameters, the first parameter is the object, the second parameter is the property name, and the third parameter is the property value.

For example, we have an object:

let obj = {
  name: 'Tom',
  age: 20
}

Now we need to dynamically add a property score to this object with a value of 90. We can use Vue.setthe method:

Vue.set(obj, 'score', 90)

At this point, the obj object becomes:

{
  name: 'Tom',
  age: 20,
  score: 90
}

Using the $set Method

In addition to Vue.setthe method, Vue also provides a setmethod, which is similar in usage. setThe method is a method of the Vue instance and can be used directly in the Vue component.

For example, we have a Vue component:

<template>
  <div>{{ obj }}</div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'Tom',
        age: 20
      }
    }
  },
  mounted() {
    this.$set(this.obj, 'score', 90)
  }
}
</script>

In mountedthe hook function, we used this.$setthe method to dynamically add an attribute score to the obj object with a value of 90.

Direct assignment

In addition to using Vue.setthe and $setmethods, we can also dynamically add properties and values ​​to objects by directly assigning them. For example:

let obj = {
  name: 'Tom',
  age: 20
}

obj.score = 90

At this point, the obj object becomes:

{
  name: 'Tom',
  age: 20,
  score: 90
}

However, it should be noted that direct assignment cannot trigger Vue's responsive system. If we need to use dynamically added properties in the template, it is recommended to use the Vue.setor $setmethod.

Note:

1. When dynamically adding properties and values ​​to an object, it is recommended to use the Vue.set or $set method, which triggers Vue's responsive system and ensures that the template can correctly use the dynamically added properties.
2. If you need to dynamically add properties and values ​​to multi-layer nested objects, it is recommended to use the Vue.set or $set method to ensure that objects at all levels can correctly trigger responsiveness.
3. The dynamically added attributes and values ​​should not have the same names as the existing attributes and values, otherwise they will overwrite the existing attributes and values.
4. When using the $set method in a Vue component, you need to pay attention to the this pointing problem. You can use arrow functions or bind methods to solve this problem.

Summarize:

Dynamically adding properties and values ​​is one of the common operations in Vue development. In actual development, we need to choose the appropriate method to implement it according to specific needs. Using the Vue.setor $setmethod can ensure that Vue's responsive system can work correctly, so it is recommended to give priority to it.