[Bug Report] When the El-cascade componet options changes the console print : Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null"

[cysong]

Element UI version

2.11.1

OS/Browsers version

Windows 7 professional 64bit Service pack 1/Chome 62.0.3202.94

Vue version

2.6.10

Reproduction Link

https://codepen.io/shadesonng/pen/VodXRr

Steps to reproduce

click the button of "change options", the console print:Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null"

What is Expected?

the console print no error

What is actually happening?

the console print error

[LOCKD2016]

遇到相同的问题了,尝试清空级联选择器的值以及选中的节点还是会出现相同的问题,看了一下源码,发现是activePath这个属性的值在更改options后貌似没有初始化

[kungua]

遇到相同的问题了,尝试清空级联选择器的值以及选中的节点还是会出现相同的问题,看了一下源码,发现是activePath这个属性的值在更改options后貌似没有初始化

能不能问一下 你最终是怎么解决的呢==。

[BANG666]

遇到相同的问题了，尝试清空级联选择器的值以及选中的节点还是会出现相同的问题，看了一下源码，发现是activePath这个属性的值在更改选项后貌似没有初始化

能不能问一下你最终是怎么解决的呢==。

[kungua]

我的业务场景是这样的我有一个
Select + Cascader
Cascader 中的选项依赖于 Select 的值
然后 Select 变化我的Cascader 中的值在变的时候 报错了

我现在的解决方案是
Select 的值变化的时候 移除 Cascader
在下一刻 再添加回来 勉强解决了这个问题。

希望官方能给一个方法 手动清空 cascader 的值

[LOCKD2016]

@kungua 并没有解决,但是这不影响功能,只是控制台报错

[kungua]

但是会抛出异常
统计数据的时候会很丑==。

[BANG666]

在联动的元素值改变时将Cascader删除，然后在取到数据后加载回来，我这样做已经解决了报错

[liangShengSen]

移除了在添加回来，体验不行

[SimonaliaChen]

抱歉，应该是 #16709 的pr引起的，会在下个版本修复

[Megan-TA]

遇到相同的问题了,尝试清空级联选择器的值以及选中的节点还是会出现相同的问题,看了一下源码,发现是activePath这个属性的值在更改options后貌似没有初始化

看了下源码确实是这样，如果要重新更改options的值必须要清空掉activePath的值，我做了如下处理就不会报错（cascade组件嵌套在el-form-item下）

this.$refs.ticketTypes.$children[1].$children[1].activePath = []

当然这样的方式直接外部更改子组件的值是不建议的，希望官方能修复这个问题

[Megan-TA]

我的业务场景是这样的我有一个
Select + Cascader
Cascader 中的选项依赖于 Select 的值
然后 Select 变化我的Cascader 中的值在变的时候 报错了

我现在的解决方案是
Select 的值变化的时候 移除 Cascader
在下一刻 再添加回来 勉强解决了这个问题。

希望官方能给一个方法 手动清空 cascader 的值

确实你这个方法是可行的，销毁组件再重新渲染就会重新加载options和activePath的值，但是这样的方法有个最大问题就是组件销毁再创建的时候，页面会抖动一下，体验很差，参考手动获取cascader组件更改内部值为activePath=[]，不是很建议但有用

这个 bug 在我这里还会导致 移除其中一项时 无效
在 el-cascader 属性中加一个 :key="Math.random()" 可以解决
<el-cascader
......
:key="Math.random()"
:show-all-levels="false" />