Analysis of usage of $set in Vue

How to use $set() in Vue

Preface

Since Vue performs two-way data binding when initializing the instance, use()Add a getter/setter method to the property traversal, so the property must exist on the data object before the above process can be performed so that it is responsive. If you want to add new attributes to the object, the new attribute has not undergone the above process and is not responsive, so the data will change and the page will remain unchanged. It is required to use it now$set

Application scenario 1 of $set()

• When using vue for code development, you often encounter situations where you need to add attributes to a responsive object
• Sample data

myInfo: {
  name: 'wintercat',
  age: '18'
}

• We might write this at the beginning = 23The attribute has been added, but after a while you will find something is wrong. Why is this newly added attribute not responsive? You should use it at this time.$setGo to add properties,this.$set(, 'age', 24), At this time, the object data becomes responsive
• This method receives three parameters

Application scenario 2 of $set()

• When we get the data returned by the backend for page rendering, we find that the field names of the data to be displayed are the same, but we give a field name to distinguish. In this case, we need to get the value of the field name to be distinguished as a key name, and use the key-value pair to return a new data to render the page.
• Sample data

newInfo:[],
info:[
  {
    age:20, 
    name:'Zhang San'
  },
  {
    age:30, 
    name:'Li Si'
  },
  {
    age:40, 
    name:'Wang Wu'
  },
]

We loop the data first and then pass$setAdd the required data format, so that the data we get is the data we want:name：age

((item) => {
  this.$set(, , )
})
()
// :[{'Zhang San', 20},{'Li Si', 30},{'Wang Wu', 40}]

Supplement: Usage of $set in vue

Usage of $set in vue

$set is used to update an array or object

$set receives 3 parameters: Parameter 1: Parameter is an array or object that needs to be updated.
Parameter 2: is the subscript of the array or the attribute name of the object,
Parameter 3: It is updated content

$set is used to update the array:

let arr =["on Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
//The first parameter is an array, the second parameter is a subscript index, and the third parameter is a new contentthis.$set(arr,5,"Sunday"];
//result(arr);//arr=["on Monday","Tuesday","Wednesday","Thursday","Friday","Sunday"]

$set is used to update the object:

//The value of the object's attribute sex is updated to "female"let obj={name:"Xiao Ming",age:18,sex:"male"};
 //The first parameter is the object, the second parameter is the updated property name, and the third parameter is the updated contentthis.$set(obj,"sex","female");
 //result(obj)//obj={name:"Xiao Ming",age:18,sex:"female"}

This is the end of this article about the usage of $set() in Vue. For more related content on using $set() in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!