This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Moon at night, beauty in dreams

preface

Recently, I have been writing the vUE project assigned by the teacher. To be honest, I have been jumping between baidu, Google, Bing and other search engines repeatedly every day. Otherwise, I have been searching for treasures, thinking about whether to search, and CSDN to have a look. My front end is to eat rice grew up, do not know how many problems to meet every day, and then basically all around the front end of the students were asked by me, basically is who is free to pull who to teach me.

There are too many details in the front end, and it will be very troublesome once you have no contact with the problems. If you have a back-end friend who learns the front end, I think the fastest way to get familiar with the front end is to write the whole project. This is probably the fastest way to get started with a front-end framework.

Vue modifies an object in the array object

My object structure is as follows:

sections: [
    {
        id: 0.addInputBool: true.generallnformationBool: false.generallnformation: ' '.updateGenerlInfoImgBool: false.pullUpQusetionBool: true.upQusetionBool: true.downQuestionBool: false.questions: [{id:' '.name:' '.isCheckbox:' '.answer:' '.conditions: [].dropdownMultiSelections:[]}]}]Copy the code

The requirement is to modify an object in the array by subscript.

My initial idea was to assign values to arrays one by one, just like writing Java code.

this.sections[index].question[id]=this.addQuestion
Copy the code

Here index and ID are the values that we click on the page to modify, but finally we found that the error kept coming and the modification could not be realized.

Later, I checked Baidu and said:

The problem:

Assigning directly to an array index cannot modify an array object.

why:

Vue does not allow new root-level reactive properties to be dynamically added to an already created instance. However, it can be usedVue.set(object, key, value)Method adds a response property to a nested object

$set = this.$set = this

Solution:

// Array: The first argument is the array to be modified, the second value is the subscript or field to be modified, and the third value is what value to be modified
this.$set(sections[index].question,id,{
    id:'123'.name:'Prefer spring'.isCheckbox:true.answer:'Test set'.conditions: [1.2.3].dropdownMultiSelections:[a,b,c] }); or// Object: The first parameter is the object to be modified, the second value is the property field to be modified, and the third value is to be modified to what value
Vue.set(sections[index].question,id,{     id:'123'.name:'Prefer spring'.isCheckbox:true.answer:'Test set'.conditions: [1.2.3].dropdownMultiSelections:[a,b,c]})
Copy the code

$set = $set = $set = $set = $set = $set = $set = $set = $set

Second, the enclosing $set

2.1. What does this.$set do

Official explanation: Add a property to a reactive object and make sure the new property is also reactive and triggers view updates. It must be used for object type to add new attributes to response, because the Vue cannot detect common new properties (such as this. MyObject. NewProperty = ‘hello, ningzaichun’)

This.$set () may be used when you find that you have added a property to an object that is printed on the console but not updated to the view

$this.$set

// Array: The first argument is the array to be modified, the second value is the subscript or field to be modified, and the third value is the object to be modified: The first parameter is the object to modify, the second value is the property field to modify, and the third value is what value to modify Vue. Set (target, propertyName/index, Target value) parameters {Object | Array} {string | number} propertyName/index value {any}Copy the code

Small case study:

<template> <div class="page" id="app"> <button @click="add"> </button> <ol> <li v-for="(item, index) in arr" :key="index">{{ item.name }}</li> </ol> </div> </template> <script> export default { data () { return { Arr: [{name: 'NingZaiChun, age: 21}, {name: "north SangXia, age: 21}]}}, mounted () {this. Arr [2] = {name:' QingDong chestnut, age: Console. log(this.arr)}, methods: {add () {this.$set(this.arr, 2, {name: 'this.arr ', age: $set </script>Copy the code
Target: data source to be changed (can be an object or array) Key Specific data to be changed (index) Value Reassigned valueCopy the code

In Vue’s lifecycle hook function Mounted, we manually add a value to the array, but do not update it directly in the page view.

The initialized page looks like this.

But in the console it’s actually printed out

But if we click on the button’s Settings, the view changes immediately

That’s where this.$set comes in handy.

2.3, this.$set application scenario

1. When we use VUE for development, we may encounter a situation that when we have already generated a VUE instance, we try to assign or add data again, and the data cannot be updated synchronously to the data.

$set (); $set ()

self-talk

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.