vue2 element-ui el-checkbox view not updated
Today, I found a problem during the development process. As described in the title, after I changed the data in data(){return{}}, I bound the data in data() to the v-model of el-checkbox, and the corresponding view has not changed.
The reason I concluded that the data in my data() changed, but the view did not change is because the data() data has changed in the plug-in vue devtools in chrome, which proves that the boolean value bound to the v-model of el-checkbox has changed. At this time, the view should follow v-model="false" ==> v-model="true" from unchecked status ==> checked status, but the page has not been updated.
After confirming that the view is not updated due to a low-level error, the problem was handled differently
1: Baidu: Using $set() and using froceUpdate() both work
Since it has been clear that the data has changed and the view dependent on the data has not changed, you can use the more extreme method to destroy the component and remount it (this method is too extreme and relatively alternative. It is not recommended)
Since there is a method of forcing the element to be re-rendered through v-if, can some features of vue be used to perform similar operations?
My personal opinion
vue responsiveness You can use data-driven page updates to add a diff algorithm to try to give the el-checkbox component an insignificant property
For example :
data-xxx="reactive data" Change this reactive data. Let vue find that one of the data-xxx properties of the virtual Dom el-checkbox changes in the diff algorithm, so that it triggers the rendering of the component to achieve the change of the view corresponding to the value of the v-model bound change.
- example:
<el-checkbox v-model="list[index].obj[value].checked" :data-a="checked">
- pseudocode:
function changeValue(){
// Change list[index].obj[value].checked to false to true
[index].obj[value].checked = true // At this time, the view did not change from unchecked to checked due to data changes.
// Change an irrelevant value = ! // No matter what checked is, it will not affect the purpose of making vue re-render the el-checkbox component
}Summarize
In fact, in general vue development, if responsive data is not that type of very complex data types, generally there will be no responsive data changes and the view will not be more straight.
But in the above example, list is an array with multiple attributes in the array, one of which is an object, and the value we need to change is one of the attributes of this object, which may be in the two-way binding of vue.
Since list is a relatively complex data type, when the properties in the deep level change, vue cannot achieve data-driven view update.
When we are very sure that the data has been updated, but the view has not changed, all we need to do is to make the view change operation by changing an insignificant responsive data so that the component can re-render operations. This is undoubtedly a good solution.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.