vue數組中數據變化但是視圖沒有更新解決方案

原文鏈接：http://www.cnblogs.com/sufubo/p/6906261.html#undefined

問題:在vue項目中,我更改數組中的某一條數據,直接arr[i]=newVal ,發現頁面上數組沒有實時刷新;

查看官網發現:

由於 JavaScript 的限制，Vue 不能檢測以下變動的數組：

1. 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

舉個例子:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) example1.items.splice(newLength)

 

 你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：

m.$set(vm.items, indexOfItem, newValue)

 

為了解決第二類問題，你可以使用 splice：

vm.items.splice(newLength)

官網鏈接:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

相關鏈接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined