Vue arrays and objects cannot be directly assigned values and solutions (recommended). vue value assignment
Vue cannot detect the following changed Arrays:
When you use an index to directly set an item, for example:vm.items[indexOfItem] = newValue
When you modify the length of an array, for example:vm.items.length = newLength
You can usethis.$set(this.arr,index,newVal)
Vue cannot detect the addition or deletion of object attributes:
Availablethis.$set(this.person,'age',12)
When you need to add multiple objects,Object.assign({},this.person,{age:12,name:'wee'})
PS: Vue implements deep copy and replication of arrays and objects
When an object is transferred between components, because the reference type of this object points to an address (except for the basic type and null, the value assignment between objects only points the address to the same one, instead of the actual copy), as shown below:
Array:
Var a = [1, 2, 3]; var B = a; B. push (4); // a 4 alert (a) is added to B; // a is changed to [1, 2, 4].
Object:
Var obj = {a: 10}; var obj2 = obj; obj2.a = 20; // obj2.a changed, alert (obj. a); // 20, obj a changed
This is because the object type is directly assigned a value, but the reference is directed to the same address, so that if obj is modified, obj2 is also modified.
Therefore, in vue, if multiple components reference the same object as data, the data of other objects will also be changed when one of the components modifies the object data. This two-way binding is the best, but if you do not need this binding and want the object data of each component to be independent from each other, that is, the object copies of each other, you can use the following method to solve the problem:
Computed: {data: function () {var obj = {}; obj = JSON. parse (JSON. stringify (this. templateData); // this. templateData is the object passed by the parent component return obj }}
Summary
The above section describes how to assign values and solutions to vue arrays and objects. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!