V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
tlerbao
V2EX  ›  问与答

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

  •  
  •   tlerbao · 2021-08-22 14:38:34 +08:00 · 851 次点击
    这是一个创建于 1219 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题

    监听一数据的变化从而改变一个 级联选择器 的数据源 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)
          }
        }
      },
    
    4 条回复    2021-08-23 15:49:41 +08:00
    jqtmviyu683
        1
    jqtmviyu683  
       2021-08-22 15:15:22 +08:00
    this.$set(obj, key, value), 是不是传参错了。
    shilianmlxg
        2
    shilianmlxg  
       2021-08-22 15:15:51 +08:00 via iPhone
    一切操作数组的 最后要 this.$forceUpdate()
    tlerbao
        3
    tlerbao  
    OP
       2021-08-22 18:47:54 +08:00
    @jqtmviyu683 据说 this.$set(你的属性名字, 你的值) 如果是对象 this.$set(对象名字, 对象属性, 对象的值),我这么搞也不报错,其实也更新了数据的。

    @shilianmlxg 小哥,this.$forceUpdate() 也没用...很难受
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3421 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:47 · PVG 08:47 · LAX 16:47 · JFK 19:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.