Functional components with multiple roots don't render properly when used with v-for

[kellym]

Version

2.5.16

Reproduction link

https://jsfiddle.net/kb9x8rLf/

Steps to reproduce

Create a functional component that returns multiple root elements via an array, i.e.:

return [h('span'), h('span')];

Then use the functional component alongside v-for:

<my-component v-for="item in items" />

What is expected?

It should render the functional component as expected.

What is actually happening?

The rendered view contains "undefined" for each item in the array.

---

The JSFiddle demonstrates how wrapping the functional component in a <template> tag with the v-for directive fixes the issue, but the <template> tag should not be required for this. Oddly enough, there are some circumstances where it renders properly. In my use-case, I had no issues with the multiple root elements when I put the component inside a <table>, but when I wrapped the component with a <tbody> I ran into this issue I'm reporting.

[william-xue]

have it been solved?

[sirlancelot]

So if I'm understanding:

<my-functional v-for="item in items" :key="item.key" :item="item" />

Will render undefined and you should replace it with:

<template v-for="item in items">
    <my-functional :key="item.key" :item="item" />
</template>

[TitanFighter]

Since v2.5.18-beta.0 I started to see error in console:

vue.runtime.esm.js?2b0e:1819 TypeError: Cannot read property 'length' of undefined
    at simpleNormalizeChildren (vue.runtime.esm.js?2b0e:2283)
    at _createElement (vue.runtime.esm.js?2b0e:4502)
    at createElement (vue.runtime.esm.js?2b0e:4453)
    at vm._c (vue.runtime.esm.js?2b0e:4585)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0f7c0467-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/pages/Media/TheMediaBlocks.vue?vue&type=template&id=53c771c2&lang=html& (app.1b834d0e0246ea085ef9.hot-update.js:23), <anonymous>:185:7)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:4632)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2879)
    at Watcher.get (vue.runtime.esm.js?2b0e:3249)
    at new Watcher (vue.runtime.esm.js?2b0e:3238)
    at mountComponent (vue.runtime.esm.js?2b0e:2886)

@sirlancelot thank you for your example, which fixed my issue.

I think the new construction should be mentioned somewhere in the doc.