vue2.5.16 模板只支持一个控件Component template should contain exactly one root element.

场景

. 在写组件template的时候遇到

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 template只可以包含一个元素
. 解决办法将多个元素封装到一个div中

解决

<template id="task_template">
    <!--<div>-->
        <h1> My Task {{ tasks.length }}</h1>
        <ul class="list-group">
            <li v-for="task in tasks" @click="task.completed = !task.completed" class="list-group-item" :class="{completed:task.completed}"> {{ task.body}}</li>
        </ul>
    <!--</div>-->
</template>