There is a deeper problem with vue. If the attribute object in data is {} when initialized, then the subsequent assignment of the method using ordinary js syntax will be invalid.
Here is data
data() {
return {
model: {}
};
}
Here is the normal assignment in the method
afterUpload(response) {
= ;
}
Normal methods will be invalid, and you need to redisplay the declaration using the method provided by vue
afterUpload(response) {
this.$set(,'icon',)
}
Supplementary knowledge:- Dynamic changes in assignments of arrays and objects & cloning
This article mainly introduces the dynamic changes and cloning methods that vue arrays and objects cannot be assigned directly, and friends who need it can refer to it.
1. Direct assignment dynamic changes
1.1. Vue cannot detect 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
1.2. Solution
When required in the first case, you can use
this.$set(,index,newVal)
or
= [New Array]
2.1. Vue cannot detect objects with the following changes
When you modify an initialization property in an object that does not exist
= 3
Ps: Without refreshing the parent-child component of the page, a second trigger is enough, because the first trigger is rendered, but the first trigger is not triggered, and only the second will be displayed.
2.2. Solution
When modifying an existing attribute that initializes, dynamic changes can be detected directly
= 3
or
Another solution that cannot be detected above
this.$set(,'age',12)
or
= { a: 3, b: 4 }
When multiple objects need to be added
({},,{age:12,name:'wee'})
2. Arrays and object cloning
When passing an object between components, since the reference type of this object points to an address (except for the basic type and null, the assignment between the objects is just pointing to the same address, 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; // Changedalert(); // 20，objofaFollow the change
This is because the object type is assigned directly, and just pointing the reference to the same address, causing the modification of obj to cause obj2 to be modified as well.
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, a copy of the object that is unrelated, 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
}
}
Of course, you can also use this key code for daily cloning
((...));
The solution to the invalid reassignment of vue data object (unchanged) above is all the content I share with you. I hope you can give you a reference and I hope you support me more.