vuejs of responsive objects (object) fails and Solutions

Set a target in the vuejs (object) is responsive when, if not careful, will fail to record what ideas and solve simple principle.

principle

vuejs in fact, both the pure object or an array or other data types can all be set to the type of response.

However , limited by the restrictions js itself, can not detect an increase vue object properties and cut, so the vue iterates object of each attribute, then add getter and setter responsive properties, making it responsive. Js more uncomfortable but is generated directly in the object does not exist is pure, i.e., even if it is an empty object like this: {}, would carry a number of its own properties. This allows us to directly when the object is to impart a responsive Data, is invalid operation, even when using a = vue.set (object), it is still not obtained a response type.

Judge

Can also be seen from the original, determining whether a value is responsive, there is a very simple way: console.log (the value),

Opening the Object object in the console, you can clearly see that he was a property of the getter and setter,
if not to prove that this is not the response properties of this object type, (key, key) corresponding to the value of this property if (value ) changes, then call this place the value of the corresponding page is not going to respond to change.

solve

Solution:
1, said the official documentation, Object object can be turned into a pure object object, that only keys and values, without some other related properties __proto __ (), then set the assignment or assignment directly to the response objects

2, no brain method ====> Each iteration object key-value pair, and then added using vue.set responsive property, iterative, it does not add the attribute __proto__ responsive.

First remember, plus free case notes.

发布了16 篇原创文章 · 获赞 2 · 访问量 9277

Guess you like

Origin blog.csdn.net/ghfuidy/article/details/104617038