In the development process, we often encounter such a situation: when an object or array (the value in the array is an object) declared or assigned in the data of vue, a new attribute is added to the object, if you update this The value of the attribute will not update the view.
According to the official document definition: if a new attribute is added to the instance after the instance is created, it will not trigger the view update .
When you put a plain JavaScript object instance as the incoming Vue dataoption, Vue will go through all of the properties of this object, and use Object.definePropertythese attributes all into getter / setter .
Due to the limitations of modern JavaScript (and the obsolete Object.observe), Vue cannot detect the addition or deletion of object properties. Since Vue will perform the getter/setter conversion process on the property when initializing the instance, the property must exist on the data object in order for Vue to transform it, so that it can be responsive.
My table is created dynamically. Only when I click to add a row will an array be created to store the data of the current row.
After adding the data, the data is created. When I click on a college, the input will not display the corresponding data. At this time, the vue.$set() method can be used.
The corresponding data here is naturally displayed.
