Vue Element UI 的级联选择器视图不实时更新问题

[tlerbao]

问题

监听一数据的变化从而改变一个 级联选择器 的数据源 options，结果发现，似乎监听数据变化后，只在激活级联选择器的第一次页面根据新的改变后的 数据源 渲染了，此时监听数据再变化，页面上级联选择器的数据源依然是上次激活的样子。

这是渲染问题？控制台 log 发现数据源已经变了，但是视图不能实时更新。

代码

watch: {
    'formFieldsData.department': {
      handler(newVal, oldVal) {
		// 下面 this.departmentsLeader 就是级联选择器的数据源
        const data = this.departments
        // 无论是直接赋值还是用 set 都一样的结果
        // data 是个树形结构数据 addDisabled 用来遍历结构增加 disabled 属性
        // this.departmentsLeader = this.addDisabled(data, newVal)
        this.$set(this.departmentsLeader, this.addDisabled(data, newVal))
        console.log(this.departmentsLeader)
      }
    }
  },

[jqtmviyu683]

this.$set(obj, key, value), 是不是传参错了。

[shilianmlxg]

一切操作数组的 最后要 this.$forceUpdate()

[tlerbao]

@jqtmviyu683 据说 this.$set(你的属性名字, 你的值) 如果是对象 this.$set(对象名字, 对象属性， 对象的值)，我这么搞也不报错，其实也更新了数据的。

@shilianmlxg 小哥，this.$forceUpdate() 也没用...很难受

[en20]

1. 把源数据复制一份
2. 修改了里面的对象
3.把数组引用改掉

this.departmentsLeader = [...this.departmentsLeader]