Vue: An actually one root template is warned `should contain exactly one root element`

[plantain-00]

Vue.js version

2.0.3

Reproduction Link

<div v-if="type===1"></div>
<div v-if="type===2"></div>
<div v-if="type===3"></div>
<div v-if="type===4"></div>
<div v-if="type===5"></div>

Steps to reproduce

What is Expected?

No warning, because it will generate at most one element.

What is actually happening?

Warning: Component template should contain exactly one root element

[anishdcruz]

This is not a bug,

@plantain-00 wrap the content within a div.

<div>
  <div v-if="type===1"></div>
  <div v-if="type===2"></div>
  <div v-if="type===3"></div>
  <div v-if="type===4"></div>
  <div v-if="type===5"></div>
</div>

[plantain-00]

@anishdcruz
I'm OK with closing this issue, if it is difficult.

Angular2 has one root rule too, but it doesn't ban:

<div *ngIf="type===1"></div>
<div *ngIf="type===2"></div>
<div *ngIf="type===3"></div>
<div *ngIf="type===4"></div>
<div *ngIf="type===5"></div>

reactjs can do it by other way like:

if (this.props.type === 1) {
  return <div>...</div>
}
if (this.props.type === 2) {
  return <div>...</div>
}
...

[anishdcruz]

This blog might help https://dotdev.co/peeking-into-vue-js-2-part-1-b457e60c88c6#.tc99p056c

[plantain-00]

3878 issued a similar situation, and it is fixed now.

anyway, if it is difficult, or not considered as a bug, feel free to close this.

[dsonet]

In this case, since there is no v-else, what if all v-if conditions are false?

[yyx990803]

The problem here is that without code analysis of all your v-if expressions (in fact it's near impossible because it depends on your component's runtime state), there's no way to tell whether it will really return only one element.

You can get around this by either using a dynamic component (turning all conditional branches into components), or use a render function instead.