Vue: Component Templates only render the first element.

[BrandonSurowiec]

Vue.js version

Both 2.0.2 and 2.0.3

Reproduction Link

https://jsfiddle.net/165g7jz7/

What is Expected?

Should render both "1" and "2", but only renders "1."

Fails:

<example inline-template>
  <div>1</div>
  <div>2</div>
</example>

Works:

<example inline-template>
<div>
  <div>1</div>
  <div>2</div>
</div>
</example>

What is actually happening?

The component template is only rendering the first element and discarding the rest. It doesn't matter whether it is inline or not, the result is the same.

[LinusBorg]

In 2.0, _all_ templates have to have a single root node.

http://vuejs.org/guide/migration.html#Fragment-Instances-deprecated

You should see some warnings about that in your console, but maybe those don't show for inline-templates?

[BrandonSurowiec]

I didn't see any warnings when I ran the migration helper, so that might be the case.

[FreeWebStyler]

But what if i want to render not only one node?
How do like this https://jsfiddle.net/yaju8635/1/ on 2.0?
In this case just can't wrap...
Need simple template feature like in KnockOut.
Because <table> and <select> not apply any tags.
https://forum-archive.vuejs.org/topic/2088/table-and-template-on-ie/4

[RezaPouya]

why you didn't add this damn information in vue tutorial !?

[F4rid]

+1

[apptouch]

RezaPouya commented on Jan 22

EXACTLY.... what a PITA

[pniederlag]

Definitly something that's worth mentioning. Glad I finally found the reason for my ~4h troubles before getting mad.. ;)

[w-]

this really needs to be more explicit in docs. At least warnings or errors in console. ='(

[LinusBorg]

this really needs to be more explicit in docs.

https://vuejs.org/v2/guide/components.html#A-Single-Root-Element

At least warnings or errors in console.

There are warnings in the console, unless of course you use a minified version of Vue (which is means for production).

[w-]

@LinusBorg hmmm reading the docs, mine might have been a different issue.
i had two components inside my app that were adjacent to each other. i got no errors/warnings and only the first component rendered.
The second component only rendered after i surrounded one of the components in a span tag.

Am a vue noob and when i first started out i remember seeing the every component must have a single root element error so that error is def getting surfaced.

i was not using the minified production version in my env.