1. 程式人生 > >vue 數組渲染問題

vue 數組渲染問題

arr spa sharp arp ray size color 不能 style

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)

  

vue 數組渲染問題