Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to use vue's $set to assign values to array collection objects" is not understood by most people, so the editor summarizes the following, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use vue's $set to assign 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 pair object.

/ / data defines a collection object responseData: [{"id": "1", "name": "women's wear", "price": 115," num ": 1," pic ":".. / static/img/1.jpg "}, {" id ":" 2 "," name ":" menswear "," price ": 110," num ": 1," pic ":".. / static/img/2.jpg "}, {" id ":" 3 " "name": "children's wear", "price": 118, "num": 2, "pic": ".. / static/img/3.jpg"}], / / vue method request to return 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) {/ / here is the key hat.$set (val, "discussAnswer", "0"); the usage of} Vue this.$set

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

What function does this.$set achieve and why do you use it?

When you find that you have added a property to the object that can be printed on the console but not updated to the view, you may need to use the this.$set () method at this time. To put it simply, the function of this.$set is to solve this problem.

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

Second, how to use it?

For example:

1.Vue 's code written in template:

{{item.name}} change the value

Data data in 2.export 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: reassigned value

4. When the button is not clicked, the interface looks like this. Although the interface is not displayed, the console has already printed it.

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

The above is about "how to use vue $set to assign values to array collection objects" of this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.