Skip to content

Commit 6fd9f0a

Browse files
01abhishekjainsdras
authored andcommitted
Update list.md (#1429)
* Update list.md * Update list.md link `vm.$set` to the API doc
1 parent 49e7ace commit 6fd9f0a

File tree

1 file changed

+21
-3
lines changed

1 file changed

+21
-3
lines changed

src/v2/guide/list.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -268,21 +268,39 @@ Due to limitations in JavaScript, Vue **cannot** detect the following changes to
268268
1. When you directly set an item with the index, e.g. `vm.items[indexOfItem] = newValue`
269269
2. When you modify the length of the array, e.g. `vm.items.length = newLength`
270270

271+
For example:
272+
273+
``` js
274+
var vm = new Vue({
275+
data: {
276+
items: ['a', 'b', 'c']
277+
}
278+
})
279+
vm.items[1] = 'x' // is NOT reactive
280+
vm.items.length = 2 // is NOT reactive
281+
```
282+
271283
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:
272284

273285
``` js
274286
// Vue.set
275-
Vue.set(example1.items, indexOfItem, newValue)
287+
Vue.set(vm.items, indexOfItem, newValue)
276288
```
277289
``` js
278290
// Array.prototype.splice
279-
example1.items.splice(indexOfItem, 1, newValue)
291+
vm.items.splice(indexOfItem, 1, newValue)
292+
```
293+
294+
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`:
295+
296+
``` js
297+
vm.$set(vm.items, indexOfItem, newValue)
280298
```
281299

282300
To deal with caveat 2, you can use `splice`:
283301

284302
``` js
285-
example1.items.splice(newLength)
303+
vm.items.splice(newLength)
286304
```
287305

288306
## Object Change Detection Caveats

0 commit comments

Comments
 (0)