@@ -168,7 +168,7 @@ Sometimes we want to display a filtered or sorted version of an array without ac
168168For example:
169169
170170``` html
171- <li v-for =" n in evenNumbers" >{{ n }}</li >
171+ <li v-for =" n in evenNumbers" :key = " n " >{{ n }}</li >
172172```
173173
174174``` js
@@ -188,7 +188,7 @@ In situations where computed properties are not feasible (e.g. inside nested `v-
188188
189189``` html
190190<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 >
192192</ul >
193193```
194194
@@ -211,7 +211,7 @@ methods: {
211211
212212``` html
213213<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 >
215215</div >
216216```
217217
@@ -225,7 +225,7 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
225225
226226``` html
227227<ul >
228- <template v-for =" item in items" >
228+ <template v-for =" item in items" :key = " item.msg " >
229229 <li >{{ item.msg }}</li >
230230 <li class =" divider" role =" presentation" ></li >
231231 </template >
@@ -251,7 +251,7 @@ When they exist on the same node, `v-if` has a higher priority than `v-for`. Tha
251251This can be fixed by moving ` v-for ` to a wrapping ` <template> ` tag:
252252
253253``` html
254- <template v-for =" todo in todos" >
254+ <template v-for =" todo in todos" :key = " todo.name " >
255255 <li v-if =" !todo.isComplete" >
256256 {{ todo }}
257257 </li >
0 commit comments