From ad7686f754a492bed305fef9780c3a7b84b6e906 Mon Sep 17 00:00:00 2001
From: "X.L" <liximomo@gmail.com>
Date: Thu, 25 Oct 2018 02:02:45 +0800
Subject: [PATCH] fix(compiler): normalize potential functional component
 children in v-for (#8558)

fix #8468
---
 src/compiler/codegen/index.js                 |  5 ++++-
 test/unit/features/options/functional.spec.js | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js
index 42fe18874e0..f75d6300f66 100644
--- a/src/compiler/codegen/index.js
+++ b/src/compiler/codegen/index.js
@@ -406,7 +406,10 @@ export function genChildren (
       el.tag !== 'template' &&
       el.tag !== 'slot'
     ) {
-      return (altGenElement || genElement)(el, state)
+      // because el may be a functional component and return an Array instead of a single root.
+      // In this case, just a simple normalization is needed
+      const normalizationType = state.maybeComponent(el) ? `,1` : ``
+      return `${(altGenElement || genElement)(el, state)}${normalizationType}`
     }
     const normalizationType = checkSkip
       ? getNormalizationType(children, state.maybeComponent)
diff --git a/test/unit/features/options/functional.spec.js b/test/unit/features/options/functional.spec.js
index b5fb67bd680..8e06d3e12ee 100644
--- a/test/unit/features/options/functional.spec.js
+++ b/test/unit/features/options/functional.spec.js
@@ -316,4 +316,25 @@ describe('Options functional', () => {
     triggerEvent(parent.$el.querySelector('.clickable'), 'click')
     waitForUpdate(assertMarkup).then(done)
   })
+
+  // #8468
+  it('should normalize nested arrays when use functional components with v-for', () => {
+    const Foo = {
+      functional: true,
+      props: {
+        name: {}
+      },
+      render (h, context) {
+        return [h('span', 'hi'), h('span', context.props.name)]
+      }
+    }
+    const vm = new Vue({
+      template: `<div><foo v-for="name in names" :name="name" /></div>`,
+      data: {
+        names: ['foo', 'bar']
+      },
+      components: { Foo }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<span>hi</span><span>foo</span><span>hi</span><span>bar</span>')
+  })
 })