vue 數組渲染問題

vue 數組渲染問題

問題一： 用v-for循環渲染數組數據時，數據更新了，視圖卻沒有更新

　　由於 JavaScript 的限制， Vue 不能檢測以下變動的數組：
　　　　1. 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
　　　　2. 當你修改數組的長度時，例如： vm.items.length = newLength

解決方法：

　　為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果， 同時也將觸發狀態更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue) （數組， 索引， 值）

// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) （索引， 長度， 值）

　　避免第二種情況，使用 splice：

example1.items.splice(newLength)