关于elementUI中的表单数据改变但是视图没有改变

在做项目的过程中会遇到表单的数据改变但是视图没有发生改变的情况,是因为只改变了ruleform中的值,但是没有改变对象的引用,关键代码如下:

具体情况可根据具体情况分析:

代码如下:

/*********  在vue中对象是引用类型的,如果直接this.ruleForm[form[i].params] = form[i].value的话就是只改变了对象的值,
         * 并没有改变对象的引用,所以vue无法监听到这个对象的变化所以也就无法对其新增的属性进行监听。
         * 而 Object.assign({},someObject,value)相当于将一个新的对象赋值给这个属性,即改变了这个对象的引用 所以Vue监听到了这个对象的变化,
         * 从而对这个对象中的所有属性进行遍历 这样的话页面中就可以监听到对象的数据的改变了
        **********/
        var form = this.ruleForm,newObj={}
        var num = Object.keys(form);
        for(var i = 0;i<num.length;i++){
          newObj[Object.keys(form)[i]] = Object.values(form)[i]
        }
        this.ruleForm = Object.assign({},this.ruleForm,newObj)

 

posted @ 2024-02-29 13:58  星宝攸宁  阅读(84)  评论(0编辑  收藏  举报