In VueJS 2.x
, every component must have a single root element when template has more than one element. In this case, you need to wrap the elements with a parent element.
<template>
<div class="todo-item">
<h2>{{ title }}</h2>
<div v-html="content"></div>
</div>
</template>
Otherwise there will an error throwing, saying that "Component template should contain exactly one root element...".
Whereas in 3.x
, components now can have multiple root nodes. This way of adding multiple root nodes is called as fragments.
<template>
<h2>{{ title }}</h2>
<div v-html="content"></div>
</template>