修复使用index作为v-for的key

lin-xin · lin-xin · commit 9b3052774b1f · 2018-12-28T16:29:50.000+08:00
diff --git a/src/components/page/DragList.vue b/src/components/page/DragList.vue
@@ -16,7 +16,7 @@
                     <div class="item-title">todo</div>
                     <draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
                         <transition-group tag="div" id="todo" class="item-ul">
-                            <div v-for="(item,index) in todo" class="drag-list" :key="index">
+                            <div v-for="item in todo" class="drag-list" :key="item.id">
                                 {{item.content}}
                             </div>
                         </transition-group>
@@ -26,7 +26,7 @@
                     <div class="item-title">doing</div>
                     <draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
                         <transition-group tag="div" id="doing" class="item-ul">
-                            <div v-for="(item,index) in doing" class="drag-list" :key="index">
+                            <div v-for="item in doing" class="drag-list" :key="item.id">
                                 {{item.content}}
                             </div>
                         </transition-group>
@@ -36,7 +36,7 @@
                     <div class="item-title">done</div>
                     <draggable v-model="done" @remove="removeHandle" :options="dragOptions">
                         <transition-group tag="div" id="done" class="item-ul">
-                            <div v-for="(item,index) in done" class="drag-list" :key="index">
+                            <div v-for="item in done" class="drag-list" :key="item.id">
                                 {{item.content}}
                             </div>
                         </transition-group>
@@ -61,34 +61,43 @@
                 },
                 todo: [
                     {
+                        id: 1,
                         content: '开发图表组件'
                     },
                     {
+                        id: 2,
                         content: '开发拖拽组件'
                     },
                     {
+                        id: 3,
                         content: '开发权限测试组件'
                     }
                 ],
                 doing: [
                     {
+                        id: 1,
                         content: '开发登录注册页面'
                     },
                     {
+                        id: 2,
                         content: '开发头部组件'
                     },
                     {
+                        id: 3,
                         content: '开发表格相关组件'
                     },
                     {
+                        id: 4,
                         content: '开发表单相关组件'
                     }
                 ],
                 done:[
                     {
+                        id: 1,
                         content: '初始化项目，生成工程目录，完成相关配置'
                     },
                     {
+                        id: 2,
                         content: '开发项目整体框架'
                     }
                 ]

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`<div class="item-title">todo</div>`
`17`	`17`	`<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">`
`18`	`18`	`<transition-group tag="div" id="todo" class="item-ul">`
`19`		`- <div v-for="(item,index) in todo" class="drag-list" :key="index">`
	`19`	`+ <div v-for="item in todo" class="drag-list" :key="item.id">`
`20`	`20`	`{{item.content}}`
`21`	`21`	`</div>`
`22`	`22`	`</transition-group>`
`@@ -26,7 +26,7 @@`
`26`	`26`	`<div class="item-title">doing</div>`
`27`	`27`	`<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">`
`28`	`28`	`<transition-group tag="div" id="doing" class="item-ul">`
`29`		`- <div v-for="(item,index) in doing" class="drag-list" :key="index">`
	`29`	`+ <div v-for="item in doing" class="drag-list" :key="item.id">`
`30`	`30`	`{{item.content}}`
`31`	`31`	`</div>`
`32`	`32`	`</transition-group>`
`@@ -36,7 +36,7 @@`
`36`	`36`	`<div class="item-title">done</div>`
`37`	`37`	`<draggable v-model="done" @remove="removeHandle" :options="dragOptions">`
`38`	`38`	`<transition-group tag="div" id="done" class="item-ul">`
`39`		`- <div v-for="(item,index) in done" class="drag-list" :key="index">`
	`39`	`+ <div v-for="item in done" class="drag-list" :key="item.id">`
`40`	`40`	`{{item.content}}`
`41`	`41`	`</div>`
`42`	`42`	`</transition-group>`
`@@ -61,34 +61,43 @@`
`61`	`61`	`},`
`62`	`62`	`todo: [`
`63`	`63`	`{`
	`64`	`+ id: 1,`
`64`	`65`	`content: '开发图表组件'`
`65`	`66`	`},`
`66`	`67`	`{`
	`68`	`+ id: 2,`
`67`	`69`	`content: '开发拖拽组件'`
`68`	`70`	`},`
`69`	`71`	`{`
	`72`	`+ id: 3,`
`70`	`73`	`content: '开发权限测试组件'`
`71`	`74`	`}`
`72`	`75`	`],`
`73`	`76`	`doing: [`
`74`	`77`	`{`
	`78`	`+ id: 1,`
`75`	`79`	`content: '开发登录注册页面'`
`76`	`80`	`},`
`77`	`81`	`{`
	`82`	`+ id: 2,`
`78`	`83`	`content: '开发头部组件'`
`79`	`84`	`},`
`80`	`85`	`{`
	`86`	`+ id: 3,`
`81`	`87`	`content: '开发表格相关组件'`
`82`	`88`	`},`
`83`	`89`	`{`
	`90`	`+ id: 4,`
`84`	`91`	`content: '开发表单相关组件'`
`85`	`92`	`}`
`86`	`93`	`],`
`87`	`94`	`done:[`
`88`	`95`	`{`
	`96`	`+ id: 1,`
`89`	`97`	`content: '初始化项目，生成工程目录，完成相关配置'`
`90`	`98`	`},`
`91`	`99`	`{`
	`100`	`+ id: 2,`
`92`	`101`	`content: '开发项目整体框架'`
`93`	`102`	`}`
`94`	`103`	`]`