Vue cannot detect arrays with the following changes:
When you use the index to set an item directly, for example:[indexOfItem] = newValue
When you modify the length of the array, for example: = newLength
When required in the first case, you can usethis.$set(,index,newVal)
Vue cannot detect the addition or removal of object properties:
Availablethis.$set(,'age',12)
When multiple objects need to be added,({},,{age:12,name:'wee'})
PS: Vue implements deep copying and copying of arrays and objects
When passing an object between components, since the reference type of this object points to an address (except for the assignment between the basic type and null, the address is just pointed to the same, not the true copy), as follows
Array:
var a = [1,2,3]; var b = a; (4); // A 4 added to balert(a); // aBecome[1,2,3,4]
Object:
var obj = {a:10};
var obj2 = obj;
= 20; // Changed,alert(); // 20，objofaFollow the change
This is because the object type is assigned directly, and the reference is just pointed to the same address. If obj is modified, obj2 will also be modified.
So in vue, if multiple components refer to the same object as data, when one of the components changes the object data, the data of other objects will also be synchronously changed. If there is such a need for two-way binding, it is naturally the best, but if you do not need this binding and want the object data of each component to be independent of each other, that is, unrelated object copies, you can use the following method to solve it.
computed: {
data: function () {
var obj={};
obj=(()); //It is the object passed by the parent component return obj
}
}
Summarize
The above is the situation and solution that the vue array and object cannot be assigned directly by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!