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

因为 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框架开发环境搭建

来源：oschina

链接：https://my.oschina.net/u/2332115/blog/3063312