ensure unique key for elements with transition (fix #3247)

src/platforms/web/compiler/modules/transition.js

@@ -18,9 +18,14 @@ function transformNode (el: ASTElement) {
   }
 }
 
+let transitionKey = 0
 function genData (el: ASTElement): string {
   return el.transition
-    ? `transition:${el.transition},`
+    ? `transition:${el.transition},${
+        // ensure a unique key for elements with transition,
+        // if it doesn't already have one.
+        el.key ? '' : `key:"__t${transitionKey++}__",`
+      }`
     : ''
 }
 

test/unit/modules/compiler/codegen.spec.js

@@ -147,16 +147,22 @@ describe('codegen', () => {
   })
 
   it('generate transition', () => {
+    // without key, should auto-set unique key
     assertCodegen(
       '<p transition="expand">hello world</p>',
-      `with(this){return _h('p',{transition:"expand"},["hello world"])}`
+      `with(this){return _h('p',{transition:"expand",key:"__t18__"},["hello world"])}`
+    )
+    // with key
+    assertCodegen(
+      '<p transition="expand" key="1">hello world</p>',
+      `with(this){return _h('p',{key:"1",transition:"expand"},["hello world"])}`
     )
   })
 
   it('generate dynamic transition with transition on appear', () => {
     assertCodegen(
-      `<p :transition="{name:'expand',appear:true}">hello world</p>`,
-      `with(this){return _h('p',{transition:{name:'expand',appear:true}},["hello world"])}`
+      `<p :transition="{name:'expand',appear:true}" :key="test">hello world</p>`,
+      `with(this){return _h('p',{key:test,transition:{name:'expand',appear:true}},["hello world"])}`
     )
   })