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框架開發環境搭建