在VUE中改變陣列、物件。頁面沒有變化

要吃早餐發表於2018-03-28
Vue陣列物件

有的時候，我們在vue中動態新增了一些屬性，發現頁面並沒有響應這些變化。可能是我們新增的方法不對

官網上面有提醒過，由於 javascript 的限制，vue 不能檢測到以下變動的陣列

1、直接利用索引設定一個值： this.dataList[indexOfItem] = newValue;

2、修改陣列長度： this.dataList.length = 5;

第一個問題，有兩種方法都可以實現相同的效果，並且觸發狀態更新

// Vue.set
Vue.set(this.dataList, indexOfItem, newValue);

// Array.prototype.splice
this.dataList.splice(indexOfItem, 1, newValue);
複製程式碼

第二個問題可以使用 splice

this.dataList.splice(newLength);
複製程式碼

物件更改檢測注意

還是由於javascript的限制，vue不能檢測到物件屬性的新增和刪除

可以使用 Vue.set(object, key, value) 向巢狀物件新增響應式屬性。

    var vm = new Vue({
        el: '#app',
        data: {
            userData: {
                name: '小明'
            }
        }
    })
複製程式碼

可以新增一個 age 屬性到userData 中。

Vue.set(vm.userData, 'age', 27);
在元件中這樣寫
this.$set(this.userData, 'age', 27);
複製程式碼

有時候可能會新增多個屬性，這樣的話，最好是建立一個新的物件

vm.userData = Object.assign({}, vm.userData, {
    age: 27,
    branch: 'aaa'
})

this.user = Object.assign({}, this.userData, {
    age: 27,
    branch: 'aaa'
})
複製程式碼

相關文章