The use of El cascader and the solution of error reporting

Problem description ：
scene ： Some types have no data , At this time cascader Of options yes [ ], The drop-down box is empty . If you choose a type , Get cascader The data of , stay cascader Select a piece of data , Replacement type , If there is no such data, an error will be reported

This is in use element ui Medium cascader Error reports that appear
The reason is not clear for the time being , Personal understanding may be that the data source has not been updated in time , and vue It's data driven , So I added a monitor , And give cascader Bind a key, In this way, as long as the data source changes ,key Just change , Just re render

terms of settlement 1：
If there is no data, it will cascader Set to non editable

<el-cascader
   :options="cascaderOption"
   :props="props"
   :disabled="optionsChanged"
   v-model="cascaderValue"
   collapse-tags
   :placeholder="showPlaceholder"
 />

And directly return, Do not load drop-down nodes

getCascader() {
    
  this.cascaderValue= []      
  getCascader(this.type).then(response => {
    
  if(response.data.data.length === 0){
    
      this.optionsChanged = true
      this.showPlaceholder = ' No scope temporarily '
      return
    }
    this.cascaderOption = response.data.data
  });
}

terms of settlement 2： By binding unique key,key Just change , Just re render

<el-cascader
 	:key="keyValue"  //keyValue stay data In the definition of , The initial value is 0
  	clearable
    :props="propsObj"
    v-model="value"
   :options="options"
>
</el-cascader>

watch: {
    
  options(newVal) {
    
    this.keyValue++ // As long as the data source changes  , change keyValue Value , To achieve the effect of re rendering 
  }
},