From 3a37c478758e4bc7fa5d44d5527d7d11b4804531 Mon Sep 17 00:00:00 2001 From: Abhishek Jain <01abhishekjain@gmail.com> Date: Tue, 13 Feb 2018 16:28:45 +0530 Subject: [PATCH 1/2] Update list.md --- src/v2/guide/list.md | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index 0c0183bebf..e5727353db 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` 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 From c07834f895a7454df48b6ac32f9d60a02ba8c5d8 Mon Sep 17 00:00:00 2001 From: Abhishek Jain <01abhishekjain@gmail.com> Date: Sat, 10 Mar 2018 17:28:48 +0530 Subject: [PATCH 2/2] Update list.md link `vm.$set` to the API doc --- src/v2/guide/list.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index e5727353db..60acc81328 100644 --- a/src/v2/guide/list.md +++ b/src/v2/guide/list.md @@ -291,7 +291,7 @@ Vue.set(vm.items, indexOfItem, newValue) vm.items.splice(indexOfItem, 1, newValue) ``` -You can also use the `vm.$set` instance method, which is an alias for the global `Vue.set`: +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)