Component template should contain exactly one root element. If you are using v-if on multiple elemen...

最新推荐文章于 2024-03-06 23:36:55 发布

weixin_34143774

最新推荐文章于 2024-03-06 23:36:55 发布

阅读量707

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sharpest/p/10448069.html

本文解决Vue中常见的模板错误：组件模板应只包含一个根元素。文章详细解释了错误原因，并提供正确示例，展示如何使用div或其他标签包裹多个元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：https://www.cnblogs.com/liziyou/p/6708537.html

vue菜鸟一枚，下载github上的代码来框架和思路，添加自己新的代码调试的时候，发现了一个错误，，具体报错如：

error  in ./src/components/page/Test.vue
 
(Emitted value instead of an instance of Error)
  Vue template syntax error:
 
  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.
 
 
 @ ./src/components/page/Test.vue 5:2-167
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client babel-polyfill ./src/main.js

　刚开始这样写得时候是没有发现啥错误的，我只是在后面添加一个<div></div>或是加了别的就说出现这个错误

<template>
    <el-button type="primary">{{test1}}</el-button>
</template>

　　原来vue模板只能有一个根对象

所以你想要出现正常的效果，你的用一个div来或是别的标签来包裹全部的元素

正确的写法就是：

<template>
    <div>
        <el-button type="primary">haha1</el-button>
        <div>hahhaa</div>
        <el-input type="text" placeholder="测试一下"></el-input>
        <h1>{{test1}}</h1>
    </div>
</template>