Vue报错 The template root requires exactly one element

最新推荐文章于 2024-12-11 12:45:08 发布
最新推荐文章于 2024-12-11 12:45:08 发布
阅读量2.6k 收藏 2
点赞数 2
分类专栏： 笔记 Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TOP1999LHF/article/details/122360158
版权
本文介绍了在Vue2和Vue3中遇到'The template root requires exactly one element'错误的原因及解决方案。在Vue2中，错误是由于模板中存在多于一个根节点，解决方案是将所有元素包裹在一个父级元素内。而在Vue3中，虽然允许多个根节点，但错误可能由vetur插件的校验规则引起，通过关闭相关设置即可消除错误。

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

Vue报错 The template root requires exactly one element.

在这里插入图片描述

Vue2解决

因为vue的模版中只能有一个根节点，由于不支持多根节点组件，所以在<template>中插入第二个元素就会报错，将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了

Vue3解决

在 3.x 中，组件可以包含多个根节点！但是为什么还会报错呢

是因为插件vetur设置了校验规则，改一下配置规则就不会显现错误了

找到vetur>validation:Template关掉即可(如下图)

找到插件vetur

点击设置

在这里插入图片描述

点击扩展设置

在这里插入图片描述

vetur>validation:Template把√去掉就完成了

在这里插入图片描述

vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root解决方案
悲莫悲兮生别离
05-07 2388
vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root 解决方案 找到eslint配置文件，我这里是 .eslintrc.js 把 extends 中的 ‘plugin:vue/essential’，改成’plugin:vue/vue3-essential’ 搞定 网上文章说是vetur的问题，但我这里不是 贴一下我的eslint配置 module.exports
VUE报错：The template root requires exactly one element.
sun_luming的博客
06-04 3057
今天在写VUE组件时碰到一个错误：The template root requires exactly one element. 如下图： VUE的模板里有且只能有一个根节点，这里我放了两个el-date-picker元素，所以就报了这个错误，搞个div，把他们两个都放到div里就好了。 也就是在template标签中只能有一个根元素，所以我们可以弄一个div，把这个组建中需要的所有元素都放进这个div中就不会报这个错了。 ...
【前端2】vue 报错：The template root requires exactly one element
定期分享我的发现和想法，感谢你的陪伴和支持
07-03 1594
封面图内含彩蛋 ~ 原因： Vue2要求模板中的``中只能有一个根元素，也就是说最外层不能同时包含其他元素或者文本。如果模板中出现多个根元素，就会触发这个错误。 解决： vue2：所以，删除多的根元素，or在最外层再加一个div包裹其他根元素 vue3中，则去掉了这个限制。引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 3997
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
【前端】vue 报错The template root requires exactly one element
最新发布
m0_74825565的博客
12-11 1484
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。并不是一个真实的 HTML 元素，它仅在 Vue 的模板编译过程中有效，用于指示 Vue 不需要添加额外的包裹元素）。总之，检查你的 Vue 组件模板，确保它有一个单一的根元素来包裹所有的子元素。Vue 要求每个组件的模板必须有一个单一的根元素，这是为了保持组件结构的清晰和可预测性。
The template root requires exactly one element vue/no-multiple-template-root
01-14
根据你提供的引用内容，"The template root requires exactly one element"是一个关于Vue.js的错误提示。这个错误提示通常出现在Vue模板中，表示模板根元素只能有一个。 以下是解决这个错误的方法之一： 在Vue模板...
[vue/valid-template-root] The template root requires exactly one element.
07-27
回答: 错误提示"\[vue/valid-template-root\] The template root requires exactly one element."表示Vue模板需要有且只能有一个根节点。\[1\]这个错误通常是由于在Vue模板中使用了多个根节点导致的。解决这个问题的...
error The template root requires exactly one element vue/valid-template-root
07-28
这个错误通常发生在Vue...通过将内容包裹在一个单独的元素中，你就可以避免出现 "The template root requires exactly one element" 的错误。记得确保你的模板只有一个根元素，并且在根元素之外没有其他直接子元素。
The template root requires exactly one element.eslint-plugin-vue
02-21
"The template root requires exactly one element"是一个错误信息，它通常出现在使用eslint-plugin-vue进行Vue.js代码静态检查时。这个错误的原因是Vue.js模板中只能有一个根元素，而你的模板中可能有多个根元素...
【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注释码取消； 报错将取消； ...
The template root requires exactly one element.
Within的博客
05-15 381
error:[vue/valid-template-root] The template root requires exactly one element. 原因： 因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错 解决方案： 将<template>中的元素先用一个<div>包起来。 <template> <div> <p>123</p> &lt.
the template root requires exactly one element
猪儿君的博客
03-03 1329
报错：the template root requires exactly one element 翻译：模板根只需要一个元素 解决方案： <template> <!-- 加上一个div 将整个内容框起来，以后任何内容，都要在这个大的div里面写， --> <div> <h1>Child组件显示成功</h1> <h1>{{msg}}</h1> </div> &lt......
vue3报错The template root requires exactly one element
曈欣的博客
11-18 3633
vue3 项目报错：The template root requires exactly one element，大概意思是模板根目录下只需要一个元素。根目录下只能有一个跟元素，是 Vue2的要求，Vue3 中已经去掉了这个限制。那么如何解决这个错误提示呢？
vue报错：The template root requires exactly one element
ThisEqualThis的博客
11-22 1256
这段话的意思是：根模板必须有一个准确的元素。 在vue组件中会使用template标签，在template中，还需要一个标签元素将其他标签元素包裹起来，因为template标签是不会被DOM解析，生成DOM元素的时候会被隐藏。 //helloWorld.vue //正确写法 <template> <div> <h1>我是h1</h1> &l...
The template root requires exactly one element vue/no-multiple-template-root
weixin_64652648的博客
09-06 1328
当你在使用element的过程中出现了这个错误就代表<template></template>内出现了一个或几个<div></div>,且没有一个div将template内的代码全部包括起来，这个时候只需要加上一个div就可以解决这个问题。
The template root requires exactly one element（总算是解决）
华夏乐园
01-04 6752
为了在vscode中编写的代码看起来规范，肯定要使用全局的ESLint配置 一、在VS Code中添加ESLint插件 二、在node全局路径中生成 eslint 的配置文件 .eslintrc.js 1、路径一般在C:\Users\大圣\AppData\Roaming\npm\node_modules，执行cmd 2、npm init 创建 package.json 文件 3、执行 eslint --init 创建配置文件 4、按照命令提示一直脱干净，全局文件就现身完成 三、在vscode.
踩坑:The template root requires exactly one element.
qq_42388853的博客
12-15 284
这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错 解决方案： 将中的元素用一个大的包起来，这样就可以在其中添加多个元素了，可以参考以下示例： <template> <div id="vue"> Hello Vue.js!{{message}} <span>{{message1}}</span> <span v-if="seen">你看到我啦！</span> <div i
The template root requires exactly one element
把项目开发中遇到的问题记录下来
12-04 674
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

傻狍子学前端

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

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

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

打赏作者

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

抵扣说明：

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

余额充值