vue $set implements assignment of values ​​to array collection objects

Vue $set array collection object assignment

In the vue custom array object collection, you want to add another attribute and value to each array object.

// data defines a collection object responseData:[
      {'id':'1','name':'Women's clothing','price':115,'num':1,'pic':'../static/img/1.jpg'},
      {'id':'2','name':'Men's Clothing','price':110,'num':1,'pic':'../static/img/2.jpg'},
      {'id':'3','name':'Children's clothing','price':118,'num':2,'pic':'../static/img/3.jpg'}
],

// vue method request returns collection object data if (res.data.code === 'ok') {
 that.totals = res.data.data.total;
 that.questionList = res.data.data.list;
 
}

// Assignment operation for(let val of that.questionList){
//This is the key point hat.$set(val,'discussAnswer','0');
}

Usage of Vue this.$set

Solve the problem that arrays and objects are not updated after modification

1. What does this.$set do and why should we use it?

When you find that you have added a property to an object and it can be printed out in the console, but it is not updated in the view, you may need to use the this.$set() method. Simply put, the function of this.$set is to solve this problem.

Official explanation: Add a property to a responsive object and ensure that the new property is also responsive and triggers view updates. It must be used to add new properties to a reactive object, because Vue cannot detect normal new properties (such as this.myObject.newProperty = 'hi').

2. How to use it?

For example:

1. Vue code written in template:

<div v-for="(item,index) in list" :key="index"
>{{item.name}}
</div>
<button @click="changeValue" type="primary">Change value</button>
</div>

2. Export data in default{}

data(){
    return {
      list:[
        {name:'29Kun',id:1},
        {name:'299Kun',id:2},
      ]
    } 
  }

3. Click the button to trigger the changeValue method

mounted(){
  this.list[2] = {name:'2999Kun',id:3}
  console.log(this.list[0]);
}, 
methods: {
  changeValue(){
    this.$set(this.list,2,{name:'2999kun',id:3})
  }
}

Calling method: this.$set( target, key, value )

target : the data source to be changed (can be an object or an array)

key : the specific data to be changed

value : the reassigned value

4. When the button is not clicked, the interface is like this. Although the interface is not displayed, the console has been printed out

5. When the button is clicked, the this.$set method is called and the third attribute is successfully displayed.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.