Project scenario:
When writing a project, there is a requirement that in a simple el-table, ① modify the value of the field of the number of executed use cases and change the value of the number of passed use cases at the same time, but ② modify the number of passed use cases, but the number of executed use cases cannot be changed synchronously the value of
solution:
Idea 1:
At first, I thought about binding the value of v-model to the total field, but found that it could not meet the requirements②, so it was abandoned
Idea 2:
Monitor the data data of the e-table and change the passCount field when a certain item in the total field is changed
just do it...
Code demo with explanation:
Here my table data data is PassRateTableData structure like this
If you monitor PassRateTableData directly in the watch , you will find a problem. The old and new values printed are the same, and there is no way to complete my logic. I need to judge whether the total has changed according to the difference between the old and new values, so as to change the value of passCount.
The reason is that the new and old values of vue are simply assigned values. For reference types, they all point to the same address, and the values are naturally the same, so deep copying with computed attributes can solve the problem (computed cache depends on the ones that need to be monitored. object, just do a deep copy)
solution:
Now computed write on
computed:{
newPassRateTableData(){
return JSON.parse(JSON.stringify(this.PassRateTableData));
}
},
Make a copy of PassRateTableData and then listen in the watch
Through the cooperation of computed calculation attributes, first calculate the attributes that need to be monitored and then use watch to monitor
Without deep, you can still monitor the calculated data in depth
In terms of performance and readability, I personally recommend the use of computed properties