Merge pull request #2244 from clarkdo/dev

fix: add v-bind:key in all v-for

examples/async-data/pages/posts/index.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <h1>Blog</h1>
     <ul>
-      <li v-for="post in posts">
+      <li v-for="(post, index) in posts" :key="index">
         <nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
       </li>
     </ul>

examples/custom-routes/pages/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <h2>Users</h2>
     <ul class="users">
-      <li v-for="user in users">
+      <li v-for="user in users" :key="user.id">
         <nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
       </li>
     </ul>

examples/middleware/components/Visits.vue

@@ -1,6 +1,6 @@
 <template>
   <ul>
-    <li v-for="visit in visits"><i>{{ visit.date | hours }}</i> - {{ visit.path }}</li>
+    <li v-for="(visit, index) in visits" :key="index"><i>{{ visit.date | hours }}</i> - {{ visit.path }}</li>
   </ul>
 </template>
 

examples/middleware/pages/_slug.vue

@@ -4,7 +4,9 @@
     <pre>{{ userAgent }}</pre>
     <ul>
       <li><nuxt-link to="/">Home</nuxt-link></li>
-      <li v-for="slug in slugs"><nuxt-link :to="{ name: 'slug', params: { slug } }">{{ slug }}</nuxt-link></li>
+      <li v-for="(slug, index) in slugs" :key="index">
+        <nuxt-link :to="{ name: 'slug', params: { slug } }">{{ slug }}</nuxt-link>
+      </li>
     </ul>
   </div>
 </template>

examples/nested-routes/pages/index.vue

@@ -3,7 +3,7 @@
     <div class="left">
       <h2><nuxt-link to="/">Players</nuxt-link></h2>
       <ul class="players">
-        <li v-for="user in users">
+        <li v-for="user in users" :key="user.id">
           <nuxt-link :to="'/'+user.id">{{ user.name }}</nuxt-link>
         </li>
       </ul>

examples/routes-transitions/pages/users.vue

@@ -6,7 +6,7 @@
     <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
     <a v-else class="disabled">Next &gt;</a>
     <ul>
-      <li v-for="user in users">
+      <li v-for="user in users" :key="user.id">
         <img :src="user.avatar" class="avatar" />
         <span>{{ user.first_name }} {{ user.last_name }}</span>
       </li>

examples/typescript/pages/index.vue

@@ -6,7 +6,7 @@
       {{selected}}
     </div>
     <div class="flex flex-wrap ph2 justify-between bg-white-80">
-      <div v-for="person in people">
+      <div v-for="person in people" :key="person.id">
         <Card :person="person"></Card>
       </div>
     </div>

examples/vue-apollo/pages/index.vue

@@ -2,7 +2,7 @@
   <div>
     <h3>Cars</h3>
     <ul>
-      <li v-for="car in allCars">
+      <li v-for="car in allCars" :key="car.id">
         <nuxt-link :to="`car/${car.id}`">
           {{ car.year }} {{ car.make }} {{ car.model }}
         </nuxt-link>

examples/vuex-store-modules/pages/todos.vue

@@ -2,7 +2,7 @@
   <div>
     <h2>Todos</h2>
     <ul>
-      <li v-for="todo in todos">
+      <li v-for="(todo, index) in todos" :key="index">
         <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
         <span :class="{ done: todo.done }">{{ todo.text }}</span>
       </li>

examples/vuex-store-modules/pages/website.vue

@@ -2,13 +2,13 @@
   <div>
     <h2>Articles</h2>
     <ul>
-      <li v-for="article in articles">
+      <li v-for="(article, index) in articles" :key="index">
         <span>{{article}}</span>
       </li>
     </ul>
     <h2>Comments <small>(nested under articles)</small></h2>
     <ul>
-      <li v-for="comment in comments">
+      <li v-for="(comment, index) in comments" :key="index">
         <span>{{comment}}</span>
       </li>
     </ul>

examples/with-cookies/pages/index.vue

@@ -8,7 +8,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(value, key) in cookies">
+        <tr v-for="(value, key) in cookies" :key="key">
           <td>{{ key }}</td>
           <td>{{ value }}</td>
           <td><button @click="removeCookie(key)">Remove</button></td>

examples/with-firebase/pages/index.vue

@@ -10,7 +10,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(user, key) in users">
+        <tr v-for="(user, key) in users" :key="key">
           <td>
             <nuxt-link :to="{ path: `/users/${key}`}">
               <img :src="user.avatar" class="rounded" alt="avatar">

examples/with-sockets/pages/index.vue

@@ -4,7 +4,9 @@
       <li class="chat page">
         <div class="chatArea">
           <ul class="messages" ref="messages">
-            <li class="message" v-for="message in messages"><i :title="message.date">{{ message.date.split('T')[1].slice(0, -2) }}</i>: {{ message.text }}</li>
+            <li class="message" v-for="(message, index) in messages" :key="index">
+              <i :title="message.date">{{ message.date.split('T')[1].slice(0, -2) }}</i>: {{ message.text }}
+            </li>
           </ul>
         </div>
         <input class="inputMessage" type="text" v-model="message" @keyup.enter="sendMessage" placeholder="Type here..." />