cascader重新懒加载Cannot read propert

2020-05-08  本文已影响0人  吞风咽雪
优雅,永不过时

场景问题步骤

  1. cascader采用懒加载方式加载子菜单
  2. cascader选中一次子节点
  3. 重置选中值v-model为默认值[]
  4. 重置选项options为默认值[]
    此时出现报错:
报错信息

分析报错原因

  1. 根据报错代码位置一步步锁定到node_modules/element ui/lib/element-ui.common.js中的
  1. 这里本应该是个空数组,然后cascader的选中值v-model在传递过程当中,watchvalue变化耗时比较长,所以导致场景问题步骤3操作穿插在重新获取第一层选项的的代码执行过程中,以至于读取到value的值为一个包含null值的数组

解决方案

已经知道问题所在,那就好办了,只要我们在重置完选中值之后用nextTick()来调用重置选项,就可以保证value值全部更新再获取新选项了

      this.$refs.category_id.resetField()//重置选中值
      this.$nextTick(() => {
        this.categoryIdOptions = []////重置选项
      })

如果你觉得这篇文章有解决你的问题,那就buy me a coffee,然后小编就会很有动力的哦
(二维码没了扎心)

上一篇下一篇

猜你喜欢

热点阅读