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

原创于 2018-05-09 00:20:00 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了在使用Vue.js开发过程中遇到的一个常见问题：模板只能包含一个根元素。文章详细解释了这一限制的原因，并提供了解决方案，即如何通过包裹多个元素在一个单一的容器元素内来避免报错。

场景

. 在写组件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>