How to use this.$set in vue

This article is about how to use this.$set in vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The use of this.$set in vue

Background: when I was writing the front-end project, the back end gave us a json object, and I already rendered it on the page. But due to my own needs, I want to add a field to the returned object, so I use a push field to add it, but the page rendering has not changed. Only later did I realize that it was not responsive. If we want to make this new field responsive, we need to use this.$set to inject data

When an object or array is declared or assigned in vue's data (the values in the array are objects), a new property is added to the object. If you update the value of this property, the view will not be updated.

Use

This.$set (target, key, value)

Target: represents the data source, that is, the array or object you want to manipulate

Key: the field to operate on

Value: changed data

Here's a little case study:

Add an age attribute to an object and make it responsive to change

{{list}}

Age++ export default {data () {return {list: {name: "Zhang San"} Methods: {add () {if (! this.list.age) {/ / if there is no age attribute, add an age attribute this.list.age=18} else {this.list.age++} console.log (this.list)}

When we don't use this.$set to add object properties, the effect:

The data has indeed been added, but the page does not have a responsive render age property.

When we use this.$set (this.list,'age',18) to add an attribute. Effect:

We can see that the added data is responsive.

Why can it be responsive?

If you take a closer look, you can see that this.$set is used with more get age and set age methods, which is why it can be responsive.

Analysis.

The responsive principle of Vue is that the JavaScript object is passed in the Vue instance as the data option, and Vue will traverse all the property of the object and use Object.defineProperty to convert all those property to getter/setter. These getter/setter are invisible to the user, but internally they allow Vue to track dependencies and notify changes when the property is accessed and modified. It is important to note that different browsers format getter/setter differently when printing data objects on the console. The following figure is from the official document.

Thank you for reading! This is the end of the article on "how to use this.$set in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!