From: underfin <likui6666666@gmail.com>
Date: Thu, 20 Aug 2020 14:09:57 +0000 (+0800)
Subject: fix(compiler-core): should attach key to single element child of `<template v-for... 
X-Git-Tag: v3.0.0-rc.7~16
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=69cfed6b313821d1ae7ecb02b63b0aaccb5599c6;p=thirdparty%2Fvuejs%2Fcore.git

fix(compiler-core): should attach key to single element child of `<template v-for>` (#1910)
---

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 2e12ad16e0..aa98188dbf 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -104,6 +104,23 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: v-for codegen template v-for key injection with single child 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
+
+    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createBlock(\\"span\\", {
+        key: item.id,
+        id: item.id
+      }, null, 8 /* PROPS */, [\\"id\\"]))
+    }), 128 /* KEYED_FRAGMENT */))
+  }
+}"
+`;
+
 exports[`compiler: v-for codegen template v-for w/ <slot/> 1`] = `
 "const _Vue = Vue
 
diff --git a/packages/compiler-core/__tests__/transforms/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
index b8d6b3b390..1fc19c9024 100644
--- a/packages/compiler-core/__tests__/transforms/vFor.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
@@ -770,6 +770,29 @@ describe('compiler: v-for', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
+    // #1907
+    test('template v-for key injection with single child', () => {
+      const {
+        root,
+        node: { codegenNode }
+      } = parseWithForTransform(
+        '<template v-for="item in items" :key="item.id"><span :id="item.id" /></template>'
+      )
+      expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
+        source: { content: `items` },
+        params: [{ content: `item` }],
+        innerVNodeCall: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"span"`,
+          props: createObjectMatcher({
+            key: '[item.id]',
+            id: '[item.id]'
+          })
+        }
+      })
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
     test('v-for on <slot/>', () => {
       const {
         root,
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index 8ce821f972..99ab910446 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -145,6 +145,9 @@ export const transformFor = createStructuralDirectiveTransform(
           // but mark it as a block.
           childBlock = (children[0] as PlainElementNode)
             .codegenNode as VNodeCall
+          if (isTemplate && keyProperty) {
+            injectProp(childBlock, keyProperty, context)
+          }
           childBlock.isBlock = !isStableFragment
           if (childBlock.isBlock) {
             helper(OPEN_BLOCK)