From 68eaf251c4b4ea462d6e30059e7501818266715d Mon Sep 17 00:00:00 2001
From: helti <helti@qq.com>
Date: Sun, 13 May 2018 23:19:16 +0800
Subject: [PATCH] Add example pages component ':key',because vue warning~

---
 example/demos.vue                        | 3 ++-
 example/pages/cell-swipe.vue             | 3 ++-
 example/pages/index-list.vue             | 4 ++--
 example/pages/navbar.vue                 | 6 +++---
 example/pages/range.vue                  | 6 +++---
 example/pages/tab-container.vue          | 6 +++---
 example/pages/tabbar.vue                 | 8 ++++----
 packages/actionsheet/src/actionsheet.vue | 2 +-
 packages/checklist/src/checklist.vue     | 2 +-
 packages/picker/src/picker.vue           | 2 +-
 packages/radio/src/radio.vue             | 2 +-
 11 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/example/demos.vue b/example/demos.vue
index 77f6c677..f507be8e 100644
--- a/example/demos.vue
+++ b/example/demos.vue
@@ -3,7 +3,8 @@
     <div v-for="group in navs">
       <div class="page-title" v-text="group.title"></div>
       <mt-cell
-        v-for="item in group.list"
+        v-for="(item,index) in group.list"
+        :key="index"
         :to="item.path"
         is-link>
         <div slot="title">
diff --git a/example/pages/cell-swipe.vue b/example/pages/cell-swipe.vue
index e3adf3d9..a9ef68e9 100644
--- a/example/pages/cell-swipe.vue
+++ b/example/pages/cell-swipe.vue
@@ -2,7 +2,8 @@
   <div class="page-cell">
     <div class="page-title">Cell Swipe</div>
     <mt-cell-swipe
-      v-for="n in 10"
+      v-for="(n,index) in 10"
+      :key="index"
       :right="rightButtons"
       title="swipe me">
     </mt-cell-swipe>
diff --git a/example/pages/index-list.vue b/example/pages/index-list.vue
index 04ff4346..492d8193 100644
--- a/example/pages/index-list.vue
+++ b/example/pages/index-list.vue
@@ -4,8 +4,8 @@
     <p class="page-indexlist-desc">此例请使用手机查看</p>
     <div class="page-indexlist-wrapper">
       <mt-index-list>
-        <mt-index-section v-for="item in alphabet" :index="item.initial">
-          <mt-cell v-for="cell in item.cells" :title="cell"></mt-cell>
+        <mt-index-section v-for="(item,index) in alphabet" :key="index" :index="item.initial">
+          <mt-cell v-for="(cell,index) in item.cells" :key="index" :title="cell"></mt-cell>
         </mt-index-section>
       </mt-index-list>
     </div>
diff --git a/example/pages/navbar.vue b/example/pages/navbar.vue
index 927df533..e96c839d 100644
--- a/example/pages/navbar.vue
+++ b/example/pages/navbar.vue
@@ -13,13 +13,13 @@
 
     <mt-tab-container v-model="selected">
       <mt-tab-container-item id="1">
-        <mt-cell v-for="n in 10" :title="'内容 ' + n" />
+        <mt-cell v-for="(n,index) in 10" :key="index" :title="'内容 ' + n" />
       </mt-tab-container-item>
       <mt-tab-container-item id="2">
-        <mt-cell v-for="n in 4" :title="'测试 ' + n" />
+        <mt-cell v-for="(n,index) in 4" :key="index" :title="'测试 ' + n" />
       </mt-tab-container-item>
       <mt-tab-container-item id="3">
-        <mt-cell v-for="n in 6" :title="'选项 ' + n" />
+        <mt-cell v-for="(n,index) in 6" :key="index" :title="'选项 ' + n" />
       </mt-tab-container-item>
     </mt-tab-container>
   </div>
diff --git a/example/pages/range.vue b/example/pages/range.vue
index 147c9db3..fc69d9a3 100644
--- a/example/pages/range.vue
+++ b/example/pages/range.vue
@@ -2,21 +2,21 @@
   <div class="page-range">
     <h1 class="page-title">Range</h1>
     <p class="page-range-header">基本功能</p>
-    <mt-cell v-for="item in cells1" :title="item.title" :label="'value:' + item.value">
+    <mt-cell v-for="(item,index) in cells1" :key="index" :title="item.title" :label="'value:' + item.value">
       <mt-range v-model="item.value">
         <div slot="start" v-if="item.start">{{ item.start }}</div>
         <div slot="end" v-if="item.end">{{ item.end }}</div>
       </mt-range>
     </mt-cell>
     <p class="page-range-header">自定义</p>
-    <mt-cell v-for="item in cells2" :title="item.title" :label="'value:' + item.value">
+    <mt-cell v-for="(item,index) in cells2" :key="index" :title="item.title" :label="'value:' + item.value">
       <mt-range v-model="item.value" :min="item.min || 0" :max="item.max || 100" :step="item.step || 1" :bar-height="item.barHeight || 1" :disabled="item.disabled">
         <div slot="start" v-if="item.start">{{ item.start }}</div>
         <div slot="end" v-if="item.end">{{ item.end }}</div>
       </mt-range>
     </mt-cell>
     <p class="page-range-header">场景举例</p>
-    <mt-cell v-for="item in cells3" :title="item.title" :label="'value:' + item.value">
+    <mt-cell v-for="(item,index) in cells3" :key="index" :title="item.title" :label="'value:' + item.value">
       <mt-range v-model="item.value" :min="item.min || 0" :max="item.max || 100" :step="item.step || 1">
         <div slot="start" v-if="item.start" :style="{ 'font-size': item.start + 'px' }">{{ item.start }}</div>
         <div slot="end" v-if="item.end" :style="{ 'font-size': item.end + 'px' }">{{ item.end }}</div>
diff --git a/example/pages/tab-container.vue b/example/pages/tab-container.vue
index caaecd5d..b9b8d973 100644
--- a/example/pages/tab-container.vue
+++ b/example/pages/tab-container.vue
@@ -8,13 +8,13 @@
     <div class="page-tab-container">
       <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
         <mt-tab-container-item id="tab-container1">
-          <mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
+          <mt-cell v-for="(n,index) in 10" :key="index" title="tab-container 1"></mt-cell>
         </mt-tab-container-item>
         <mt-tab-container-item id="tab-container2">
-          <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
+          <mt-cell v-for="(n,index) in 5" :key="index" title="tab-container 2"></mt-cell>
         </mt-tab-container-item>
         <mt-tab-container-item id="tab-container3">
-          <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
+          <mt-cell v-for="(n,index) in 7" :key="index" title="tab-container 3"></mt-cell>
         </mt-tab-container-item>
       </mt-tab-container>
     </div>
diff --git a/example/pages/tabbar.vue b/example/pages/tabbar.vue
index 485170c1..5b2ad583 100644
--- a/example/pages/tabbar.vue
+++ b/example/pages/tabbar.vue
@@ -8,17 +8,17 @@
 
       <mt-tab-container class="page-tabbar-container" v-model="selected">
         <mt-tab-container-item id="外卖">
-          <mt-cell v-for="n in 10" :title="'餐厅 ' + n" />
+          <mt-cell v-for="(n,index) in 10" :key="index" :title="'餐厅 ' + n" />
         </mt-tab-container-item>
         <mt-tab-container-item id="订单">
-          <mt-cell v-for="n in 5" :title="'订单 ' + n" />
+          <mt-cell v-for="(n,index) in 5" :key="index" :title="'订单 ' + n" />
         </mt-tab-container-item>
         <mt-tab-container-item id="发现">
-          <mt-cell v-for="n in 7" :title="'发现 ' + n" />
+          <mt-cell v-for="(n,index) in 7" :key="index" :title="'发现 ' + n" />
         </mt-tab-container-item>
         <mt-tab-container-item id="我的">
           <div class="page-part">
-            <mt-cell v-for="n in 12" :title="'我的 ' + n" />
+            <mt-cell v-for="(n,index) in 12" :key="index" :title="'我的 ' + n" />
           </div>
           <router-link to="/">
             <mt-button type="danger" size="large">退出</mt-button>
diff --git a/packages/actionsheet/src/actionsheet.vue b/packages/actionsheet/src/actionsheet.vue
index 47c93b0b..95a5ad55 100644
--- a/packages/actionsheet/src/actionsheet.vue
+++ b/packages/actionsheet/src/actionsheet.vue
@@ -2,7 +2,7 @@
   <transition name="actionsheet-float">
     <div v-show="currentValue" class="mint-actionsheet">
       <ul class="mint-actionsheet-list" :style="{ 'margin-bottom': cancelText ? '5px' : '0' }">
-        <li v-for="( item, index ) in actions" class="mint-actionsheet-listitem" @click.stop="itemClick(item, index)">{{ item.name }}</li>
+        <li v-for="( item, index ) in actions" :key="index" class="mint-actionsheet-listitem" @click.stop="itemClick(item, index)">{{ item.name }}</li>
       </ul>
       <a class="mint-actionsheet-button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
     </div>
diff --git a/packages/checklist/src/checklist.vue b/packages/checklist/src/checklist.vue
index addce393..b8918d80 100644
--- a/packages/checklist/src/checklist.vue
+++ b/packages/checklist/src/checklist.vue
@@ -1,7 +1,7 @@
 <template>
   <div @change="$emit('change', currentValue)" class="mint-checklist" :class="{ 'is-limit': max <= currentValue.length }">
     <label class="mint-checklist-title" v-text="title"></label>
-    <x-cell v-for="option in options">
+    <x-cell v-for="(option,index) in options" :key="index">
       <label class="mint-checklist-label" slot="title">
         <span
           :class="{'is-right': align === 'right'}"
diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue
index 383b3c87..407718de 100644
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@@ -2,7 +2,7 @@
   <div class="picker" :class="{ 'picker-3d': rotateEffect }">
     <div class="picker-toolbar" v-if="showToolbar"><slot></slot></div>
     <div class="picker-items">
-      <picker-slot v-for="slot in slots" :valueKey="valueKey" :values="slot.values || []" :text-align="slot.textAlign || 'center'" :visible-item-count="visibleItemCount" :class-name="slot.className" :flex="slot.flex" v-model="values[slot.valueIndex]" :rotate-effect="rotateEffect" :divider="slot.divider" :content="slot.content" :itemHeight="itemHeight" :default-index="slot.defaultIndex"></picker-slot>
+      <picker-slot v-for="(slot,index) in slots" :key="index" :valueKey="valueKey" :values="slot.values || []" :text-align="slot.textAlign || 'center'" :visible-item-count="visibleItemCount" :class-name="slot.className" :flex="slot.flex" v-model="values[slot.valueIndex]" :rotate-effect="rotateEffect" :divider="slot.divider" :content="slot.content" :itemHeight="itemHeight" :default-index="slot.defaultIndex"></picker-slot>
       <div class="picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
   </div>
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index 324c3bd0..2feff021 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mint-radiolist" @change="$emit('change', currentValue)">
     <label class="mint-radiolist-title" v-text="title"></label>
-    <x-cell v-for="option in options">
+    <x-cell v-for="(option,index) in options" :key="index">
       <label class="mint-radiolist-label" slot="title">
         <span
           :class="{'is-right': align === 'right'}"