fix(compiler): normalize nested arrays when use functional components with v-for

vuejs#8468

Author: liximomo

src/compiler/codegen/index.js

@@ -389,7 +389,9 @@ 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
+      return `${(altGenElement || genElement)(el, state)},1`
     }
     const normalizationType = checkSkip
       ? getNormalizationType(children, state.maybeComponent)

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>')
+  })
 })

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

@@ -54,25 +54,25 @@ describe('codegen', () => {
   it('generate v-for directive', () => {
     assertCodegen(
       '<div><li v-for="item in items" :key="item.uid"></li></div>',
-      `with(this){return _c('div',_l((items),function(item){return _c('li',{key:item.uid})}))}`
+      `with(this){return _c('div',_l((items),function(item){return _c('li',{key:item.uid})}),1)}`
     )
     // iterator syntax
     assertCodegen(
       '<div><li v-for="(item, i) in items"></li></div>',
-      `with(this){return _c('div',_l((items),function(item,i){return _c('li')}))}`
+      `with(this){return _c('div',_l((items),function(item,i){return _c('li')}),1)}`
     )
     assertCodegen(
       '<div><li v-for="(item, key, index) in items"></li></div>',
-      `with(this){return _c('div',_l((items),function(item,key,index){return _c('li')}))}`
+      `with(this){return _c('div',_l((items),function(item,key,index){return _c('li')}),1)}`
     )
     // destructuring
     assertCodegen(
       '<div><li v-for="{ a, b } in items"></li></div>',
-      `with(this){return _c('div',_l((items),function({ a, b }){return _c('li')}))}`
+      `with(this){return _c('div',_l((items),function({ a, b }){return _c('li')}),1)}`
     )
     assertCodegen(
       '<div><li v-for="({ a, b }, key, index) in items"></li></div>',
-      `with(this){return _c('div',_l((items),function({ a, b },key,index){return _c('li')}))}`
+      `with(this){return _c('div',_l((items),function({ a, b },key,index){return _c('li')}),1)}`
     )
     // v-for with extra element
     assertCodegen(
@@ -126,7 +126,7 @@ describe('codegen', () => {
   it('generate ref on v-for', () => {
     assertCodegen(
       '<ul><li v-for="item in items" ref="component1"></li></ul>',
-      `with(this){return _c('ul',_l((items),function(item){return _c('li',{ref:"component1",refInFor:true})}))}`
+      `with(this){return _c('ul',_l((items),function(item){return _c('li',{ref:"component1",refInFor:true})}),1)}`
     )
   })
 
@@ -550,7 +550,7 @@ describe('codegen', () => {
   it('generate static trees inside v-for', () => {
     assertCodegen(
       `<div><div v-for="i in 10"><p><span></span></p></div></div>`,
-      `with(this){return _c('div',_l((10),function(i){return _c('div',[_m(0,true)])}))}`,
+      `with(this){return _c('div',_l((10),function(i){return _c('div',[_m(0,true)])}),1)}`,
       [`with(this){return _c('p',[_c('span')])}`]
     )
   })