Vue数组元素双向绑定,修改数组元素后视图不更新问题

左心房为你撑大大i 提交于 2019-12-01 11:08:10

因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化:

  1. 直接用索引设置元素,如 vm.items[0] = {};

  2. 修改数据的长度,如 vm.items.length = 0。

为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法:

this.$set(this.number, 0 , "A");  

说明:

针对html中表单双向绑定修改后的值,数组修改可以同步页面呈现;

针对js代码中直接修改数组对象,页面呈现不同步。

示例:

//提交处理
                    var list = _this.postlist;
                    var isHasItem = false;
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        if (item.company == data.company) {
                            isHasItem = true;
                            //修改处理--这种方式不会触发视图更新,针对于非双向绑定的model值,例如startDate,endDate 的文本框没有设置双向绑定
                            // item.company = data.company;
                            // item.post = data.post;
                            // item.startDate = data.startDate;
                            // item.endDate = data.endDate;

                            _this.$set(_this.postlist,i,data);
                            console.info(item);
                        }
                    }
                    if (isHasItem == false) {
                        list.push(data);
                    }

 

 

更多:

在vue中使用echarts的自定义主题

Vue Element表单绑定(四)常用操作整理

Muse-UI +Vue2.0框架开发环境搭建

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!