[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=[]，不是很建议但有用

[ghost]

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

[Wizzercn]

这个bug在2.13.0发布版本中并没有得到解决 @iamkun

[zhangchaoxu]

同上，在2.13.0问题依然存在

[pandaxxw]

同上，在2.13.0问题依然存在

[NateScarlet]

在每次options更改时 赋予cascader一个新的key值(强制使用新的实例)可以解决
https://codepen.io/NateScarlet/pen/gObgJxX

回复完才发现上面已经有人说了

[ZH-CHAN]

value为int时在2.13版本仍出问题，但是改为字符串后问题暂时可以解决

[TLang622]

在2.13.0问题依然存在，我通过设置this.$refs.cascader.activePath = [] 解决问题

[eason-shsf]

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

this solved my problem, thankyou somuch, but how do you figure out this work around?

[Lesty612]

this.$refs.cascader.panel.activePath = [];

[FE-runner]

20200326 仍未解决 添加随机key有效

[9-lives]

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

在 el-dialog 的弹窗的表单内，如果给 cascader 使用 key，且表单校验失败，会在视口左上角生成 panel。请问有办法解决吗

[0730chen]

20200506 仍未解决 添加随机key有效 :key="Math.random()"

[abaf6789]

value为int时在2.13版本仍出问题，但是改为字符串后问题暂时可以解决

在 el-dialog的弹窗表单内使用:key="Math.random()"是无效的，会造成左上角生成panel。通过这个方法改变value为string类型可以解决，感谢~

[MassimilianoMontagni]

+1

Any update about the resolution of the bug?

[xiaoqingb]

mark！

[asadegg]

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

好耶

[RoadMillion]

添加key 使其重新渲染，在多选的情况下，体验不好。。。。

[RoadMillion]

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

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

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

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

官方暂时不修复的话，推荐使用此方式。再多选的情况下如果使用key方式重新渲染组件，需要重新点开再选择，体验不好。

[MrXwq]

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

看了下源码确实是这样，如果要重新更改options的值必须要清空掉activePath的值，我做了如下处理就不会报错（cascade组件嵌套在el-form-item下）
this.$refs.ticketTypes.$children[1].$children[1].activePath = []
当然这样的方式直接外部更改子组件的值是不建议的，希望官方能修复这个问题

官方暂时不修复的话，推荐使用此方式。再多选的情况下如果使用key方式重新渲染组件，需要重新点开再选择，体验不好。

的确，每次选完都会关闭下拉框，所以我也选择清空activePath
在<el-cascader ref="ticketTypes" :value="currentValue"
每次改变currentValue 设置 this.$refs.ticketTypes.$children[1].activePath = [];，我的报错问题暂时解决

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.