Here is a description of the problem process:

1. To add, delete, change and check the data, I opened the drawer on the right side to display the form form during data editing. I packaged the drawer into a component and pulled it out separately. Sync =”dialogVisible” binding dialogVisible is set to true in the parent component, and then set the edit details interface in the open drawer event, and the cascade component lazy load automatic execution city linkage interface.

CityList is an array containing the city id, for example, Beijing, Beijing, and dongcheng. If you want to display the cityList, the array will be [1,2,3], so that the cascading component can use this data to retrieve the returned data from the interface

<el-cascader v-model="formObj.cityList" :props="casProps" style="width: 100%" :key="flag"></el-cascader>
Copy the code

3. The reason for the return is that the detail interface has not returned the formobJ.cityList when the callback interface of the cascading component is executed, so the formobJ.cityList array is empty, so the city cannot be displayed successfully

== Let’s look at the reason why no echo succeeds ==

lazyLoadArea(node, resolve) {
    const id = node.value || 0
    this.getCity(id).then((res) = > {
      const nodes = JSON.parse(JSON.stringify(res.data))
      nodes.forEach((item) = > {
        if(! item.subCount) { item['leaf'] = true
        }
      })
      resolve(nodes)
    })
}
Copy the code

The above code is a lazy loading method to be executed in logic. Check the key method resolve(Nodes), which sends the level-1 city data returned by the interface as a parameter to the resolve method to request level-2 city data. In this case, the interface needs to pass in the ID of the level-1 selected city to obtain level-2 city data

How does this method work in the source code

Access via breakpoint:This section of the source code is the implementation of lazy loading core code:Here’s a look at that part of the judgment:

  1. This5. checkedValue is an array of city ids returned by the detail interface. If this attribute is an array, it will be checked
  2. Check the first value of the checkedValue array and return the value that matches the id of the first value of the checkedValue from the dataList (this attribute is the first city data returned by the first city interface). You can see here that it’s critical that there is a value in ==checkedValue==

The reason for my problem is that interface asynchrony and network jitter do not guarantee that the city ID array has been returned when executing this lazy loading recursion, so there will be occasional problems that cannot be displayed

Well, the cause of our problem has been found: here’s how to solve it

== The solution ==

 watch: {
   'formObj.cityList': {
     deep: true.handler(newValue, oldValue) {
       this.watchIndex++
       if (this.watchIndex === 1) {
         this.flag = !this.flag
       }
     },
   },
 },
Copy the code

Bind a key to the component and add a listener to the Formobj.cityList array to change the flag of the bind key when the array changes

Why do you do that?

It must say Vue source code update mechanism: the Vue/SRC/core/vdom/patch. The js diff operation in this file will decide if this is not the same node, to update the nodeConclusion: After listening to change the value of flag, the component will re-render, and the data will be retrieved, so we can solve the problem