2021-07-18 解决关于“The template root requires exactly one element.“的报错

最新推荐文章于 2026-05-31 15:52:07 发布
原创 最新推荐文章于 2026-05-31 15:52:07 发布 · 312 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
bug&error

当前文章被收录于：

bug&error
20 篇文章 0 人学习
订阅专栏 查看详情
当在Vue单文件组件中定义多个标签时，会出现'Template root requires exactly one element'的错误。该问题源于Vue模板必须有一个根元素。解决方法是在`template`标签内包裹一个大的`div`来确保只有一个根节点。
出现场景:

单文件组件.vue文件中定义多个标签时报错

  3:5  error  The template root requires exactly one element  vue/valid-template-root

✖ 1 problem (1 error, 0 warnings)
原因:

vue模板中只能有一个根节点,在template标签中插入多个元素会报错

解决:

用一个大的div包起来

标签
#vue #组件
Kettle下载与安装教程【保姆版】
weixin_43407520的博客
03-19 12万+
Kettle简介 Kettle最早是一个开源的ETL工具，全称为KDE Extraction, Transportation, Transformation and Loading Environment。后来Kettle重命名为Pentaho Data Integration 。 它由Java开发，支持跨平台运行，其特性包括：支持100%无编码、拖拽方式开发ETL数据管道；可对接包括传统数据库、文件、大数据平台、接口、流数据等数据源；支持ETL数据管道加入机器学习算法。 主要功能 Pentaho D
Acgis中实现栅格经纬度和行政区关联
qq_42183184的博客
06-09 3350
目前已有意大利的shp文件，希望将意大利划分成0.1*0.1经纬度的栅格，并且关联每个栅格中心点所属的省份信息。最终希望得到的输出是一个表格，里面包含栅格的经纬度、所属省份信息。
[vue/valid-template-root]The template root requires exactly one element.错误。
weixin_42464106的博客
07-05 6517
出现如上图一样的错误提示，是因为Vue模版只能有一个根节点，所以需要改动一下即可。在 中添加一个 标签，之后所有的组件全部加在 即可解决。
西门子S7-200 SMART PLC控制伺服电机
CHUXUEZHE8210的博客
02-18 6312
以下是使用西门子S7-200 SMART PLC控制伺服电机的详细程序框架和配置说明，涵盖硬件接线、PLC配置和基本运动控制逻辑。具体实现需根据伺服电机型号（如松下、三菱、台达等）调整参数。通过以上步骤，可实现伺服电机的基础位置控制。实际应用需根据设备机械参数和伺服驱动器手册调整细节。建议在调试时逐步测试脉冲输出和方向信号是否正常。
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 4559
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
【vue 报错】The template root requires exactly one element
a417125111的博客
09-18 2万+
[eslint-plugin-vue] [vue/valid-template-root] The template root requires exactly one element. 原因： 因为vue的模版中只有能一个根节点，所以在template中插入第二个元素就会报错 将div注释码取消； 报错将取消； ...
vue报错：Vue Error: The template root requires exactly one element.
qq_37291053的博客
07-26 366
原因是template里只允许一个根节点。
The template root requires exactly one element.(vue/valid-template-root)错误处理
圣人男的博客
03-16 8163
在使用自定义组件的时候 出现的错误 <template> <el-row :gutter="20" class="el-row"> </el-row> <EditApp ></EditApp> </template> 因为Vue模版只能有一个根节点，所以需要改动一下即可 <templat...
记录前端内网开发
最新发布
Mr.小灰狼_随笔
05-31 500
记录前端内网开发 目录 正篇： 一、nvm 二、Node 三、npm 四、Git 五、VSCode 中篇： 一、package.json 1、catalog、workspace 2、npm i 报错 3、pnpm ⭐️ 3-1、pnpm 清理缓存命令 3-2、pnpm install 报错 3-3、pnpm run build 报错 二、pack-lock.json 三、Git 相关问题
[vuevalid-template-root]The template root requires exactly one element.错误解决办法
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
03-30 862
[vuevalid-template-root]The template root requires exactly one element.错误解决办法
【Vue3】报错：The template root requires exactly one element
Love_Study2的博客
10-28 2489
标签中，根标签有多个，如： 1：用div标签包住就行了 2：在vue的.eslintrc.js 文件中配置： "vue/no-multiple-template-root":'off'
vue--The template root requires exactly one element.的解决办法
weixin_56181202的博客
03-14 2589
vue--The template root requires exactly one element.的解决办法。报错原因： 在vue中会出现以上问题，这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错。
vue3报错：The template root requires exactly one element终极解决办法
Y_soybean_milk的博客
04-22 3万+
兴冲冲的开启一个vue3项目，控制台却报错The template root requires exactly one element 我们知道，在vue2中，template中只能有一个根元素，但在vue3中，则去掉了这个限制 那么如何解决这个错误提示呢？ 方法一 可能是项目中引入的eslint报的错 解决方法：在项目的.eslintrc.js配置文件的rules中添加："vue/no-multiple-template-root": "off" rules: { 'no-console':
Vue报错-[vue/no-multiple-template-root] The template root requires exactly one element
Delete_89x的博客
10-29 1815
123
vue3报错The template root requires exactly one element
曈欣的博客
11-18 3839
vue3 项目报错：The template root requires exactly one element，大概意思是模板根目录下只需要一个元素。根目录下只能有一个跟元素，是 Vue2的要求，Vue3 中已经去掉了这个限制。那么如何解决这个错误提示呢？
The template root requires exactly one element的解决办法
pingguo函数的博客
11-10 2227
vue项目中出现The template root requires exactly one element的报错，是因为vue的template里只能有一个根节点，所以在中插入第二个元素就会报错
Vue：The template root requires exactly one element.的解决办法
热门推荐
灿灿大王搭建的黄金屋
05-28 9万+
这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错 解决方案： 将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例： <template> <div id="vue"> Hello Vue.js!{{message}} ...
the template root requires exactly one element
猪儿君的博客
03-03 1399
报错：the template root requires exactly one element 翻译：模板根只需要一个元素 解决方案： <template> <!-- 加上一个div 将整个内容框起来，以后任何内容，都要在这个大的div里面写， --> <div> <h1>Child组件显示成功</h1> <h1>{{msg}}</h1> </div> &lt......
The template root requires exactly one element vue/no-multiple-template-root
weixin_64652648的博客
09-06 1461
当你在使用element的过程中出现了这个错误就代表<template></template>内出现了一个或几个<div></div>,且没有一个div将template内的代码全部包括起来，这个时候只需要加上一个div就可以解决这个问题。
vue3报错：The template root requires exactly one element
weixin_52648900的博客
05-30 799
解决 vue3 根组件 在 vscode 中报错
The template root requires exactly one element解决方法
weixin_57246351的博客
10-06 893
报错原因:模板根只需要一个元素。 错误代码 <template> <!-- 一级路由 --> <router-view></router-view> <div class="test">我是测试文字</div> </template> 正确代码 <template> <div> <!-- 一级路由 --> <router-view></
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值