Today, when I was writing a program as usual, I suddenly found that after using table pagination, I suddenly couldn't select all. . . . All kinds of entanglements! Finally, the project requirements are completed by using the monitoring attribute in Vue; then step into the topic! ! !
listening property
1. The listening attribute is implemented using the watch option of the Vue instance
2. Format 1: written inside the Vue instance.
example:
watch:{
被侦听的变量:function(newValue,oldValue){
……
}
}
Parameters for listening properties:
newValue 表示被侦听的变量变化后的值
oldValue 表示备侦听的变量变化前的值
three,
The listening attribute must be a variable that appears in the data area of the Vue instance.
Four,
The meaning of the listening attribute: when the monitored variable changes, execute the function corresponding to the listening attribute.
five,
Advanced options for listening properties:
① immediate: Set whether the function corresponding to the listening attribute is executed immediately when the Vue instance is created. The default value is false, meaning no immediate execution by default.
② deep: Set whether the listening attribute adopts the deep listening mode, that is, whether you want to listen to all members in a variable of an object type. The default value is false.
example:
Listen to a variable of object type. When the value of any key name in the object variable changes, the listening function is executed.
var obj={
a:10,b:20};
watch:{
obj:{
handler:function(newValue,oldValue){
… },
deep:true
}
}
Today we use "Deep Listening" in the listening properties to solve the problems we encountered! !
In this vue page, use the interface to call the background data and bind it to the page. The code is as follows:
Obtain data in the hook function and assign it to the data area variable, then bind it to the table, render and display the data, and use pagination for pagination;
When we add variables in the data area, we need to make two arrays, one for operation and one for display.
In-depth monitoring of variable values using listening properties
In the listening attribute, enable deep and immediate, and set the value to true
Determine whether the batch delete button is available
Click the batch delete button to delete in batches
The following is the page display effect
