Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

yyx990803commented, Nov 5, 2016

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.

0reactions

dsonetcommented, Nov 5, 2016

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

Top Results From Across the Web

Vue js error: Component template should contain exactly one ...

Currently, a VueJS template can contain only one root element (because of rendering issue); In cases you really need to have two root...

VueJS Component template should contain exactly one root ...

VueJS Component template should contain exactly one root element ; templates can contain one and only one root node. This is correct: ;...

enable <template> as component root element when it ...

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Component template should contain exactly one root element ...

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Vue Components - Nice To Knows - 30 Days of Vue

Component template should contain exactly one root element... Instead, we are expected to wrap our component templates in a single root element. For...