Log the potholes encountered in front-end development

Description: In the use of el-Cascader to achieve the cascade effect, want to achieve the cascade selector according to the specified condition default select intermediate link option effect. inELement-uiConfiguration options for a specified condition can be made by binding the props property value. The followingError in render: “TypeError: Cannot read property ‘algorithmInfos’ of NULL “TypeError: Cannot read property ‘algorithmInfos’ of NULL”

Find the source of the problem:

Because the data displayed by the Cascader dropdown is provided by the background interface, when changing the default value display, the data returned by the background is assigned to the data bound by the V-Model. Such assignment can achieve the default value change display, but after changing the binding type, Cascader options have been dynamically changed so that Cascader binding values do not exist in the drop – down options. In short, clicking or selecting the parent node changes the type of the list, so options will change dynamically. After the change, an error will be generated because there is no parent node. Of course, as long as the activePath does not change, an error will be generated.

Solution:

Changing the list type and then changing the options can be done by simply re-rendering the Cascader component. I used the following method to re-render Cascader: set a key value for Cascader (note that isResouceShow: 0 needs to be initialized in data first)

The idea is that when you change the list type, you also change the key. If the key is changed, Cascader can rerender. The implementation is as follows:

 <el-form-item label="Interface selection">
        <el-cascader
          v-model="form.stringList"
          :key="isResourceShow"
          :options="allApiList"
          :props="optionProps"
          @change="handleChange"
        />
 </el-form-item>
...
data(){
 return{
	/ /...
	optionProps: {
        value: 'id'.label: 'name'.children: 'algorithmInfos'
	},
 	isResourceShow:0,}// ...
}

// ...
selectAlg().then(data= > {
      ++this.isResourceShow
      console.log('5454' + data)
      this.allApiList = data
})
/ /...


Copy the code

Implementation effect Stuck_out_tongue_closed_eyes :~