diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index 0c0183bebf..60acc81328 100644 --- a/src/v2/guide/list.md +++ b/src/v2/guide/list.md @@ -268,21 +268,39 @@ Due to limitations in JavaScript, Vue **cannot** detect the following changes to 1. When you directly set an item with the index, e.g. `vm.items[indexOfItem] = newValue` 2. When you modify the length of the array, e.g. `vm.items.length = newLength` +For example: + +``` js +var vm = new Vue({ + data: { + items: ['a', 'b', 'c'] + } +}) +vm.items[1] = 'x' // is NOT reactive +vm.items.length = 2 // is NOT reactive +``` + To overcome caveat 1, both of the following will accomplish the same as `vm.items[indexOfItem] = newValue`, but will also trigger state updates in the reactivity system: ``` js // Vue.set -Vue.set(example1.items, indexOfItem, newValue) +Vue.set(vm.items, indexOfItem, newValue) ``` ``` js // Array.prototype.splice -example1.items.splice(indexOfItem, 1, newValue) +vm.items.splice(indexOfItem, 1, newValue) +``` + +You can also use the [`vm.$set`](https://vuejs.org/v2/api/#vm-set) instance method, which is an alias for the global `Vue.set`: + +``` js +vm.$set(vm.items, indexOfItem, newValue) ``` To deal with caveat 2, you can use `splice`: ``` js -example1.items.splice(newLength) +vm.items.splice(newLength) ``` ## Object Change Detection Caveats