@@ -168,7 +168,7 @@ Sometimes we want to display a filtered or sorted version of an array without ac
168
168
For example:
169
169
170
170
``` html
171
- <li v-for =" n in evenNumbers" >{{ n }}</li >
171
+ <li v-for =" n in evenNumbers" :key = " n " >{{ n }}</li >
172
172
```
173
173
174
174
``` js
@@ -188,7 +188,7 @@ In situations where computed properties are not feasible (e.g. inside nested `v-
188
188
189
189
``` html
190
190
<ul v-for =" numbers in sets" >
191
- <li v-for =" n in even(numbers)" >{{ n }}</li >
191
+ <li v-for =" n in even(numbers)" :key = " n " >{{ n }}</li >
192
192
</ul >
193
193
```
194
194
@@ -211,7 +211,7 @@ methods: {
211
211
212
212
``` html
213
213
<div id =" range" class =" demo" >
214
- <span v-for =" n in 10" >{{ n }} </span >
214
+ <span v-for =" n in 10" :key = " n " >{{ n }} </span >
215
215
</div >
216
216
```
217
217
@@ -225,7 +225,7 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
225
225
226
226
``` html
227
227
<ul >
228
- <template v-for =" item in items" >
228
+ <template v-for =" item in items" :key = " item.msg " >
229
229
<li >{{ item.msg }}</li >
230
230
<li class =" divider" role =" presentation" ></li >
231
231
</template >
@@ -251,7 +251,7 @@ When they exist on the same node, `v-if` has a higher priority than `v-for`. Tha
251
251
This can be fixed by moving ` v-for ` to a wrapping ` <template> ` tag:
252
252
253
253
``` html
254
- <template v-for =" todo in todos" >
254
+ <template v-for =" todo in todos" :key = " todo.name " >
255
255
<li v-if =" !todo.isComplete" >
256
256
{{ todo }}
257
257
</li >
0 commit comments