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

最新推荐文章于 2024-12-11 12:45:08 发布
原创 最新推荐文章于 2024-12-11 12:45:08 发布 · 292 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #组件

当在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包起来

vue3：The template root requires exactly one element详细排查解决方法，不是template节点的问题检查了很多依旧提示错误（vue3运行/打包时报错）
高级前端工程师
08-18 3449
【vue 报错】The template root requires exactly one element，Vue3模板根节点报错：template root requires exactly one element如何解决？模板必须有一个根元素来包裹所有的子元素，vue3提示只能有一个根元素，Vue：The template root requires exactly one element.的解决办法，vue的模版中只能有一个根节点，template中插入第二个元素就会报错，根节点没有问题怎么办，di
【VUE-多个根节点问题】 [vue/valid-template-root] The template root requires exactly one element
Douglas的博客
11-02 1334
Vue文件多个根节点报错问题
vue报错：Vue Error: The template root requires exactly one element.
qq_37291053的博客
07-26 341
原因是template里只允许一个根节点。
【前端2】vue 报错：The template root requires exactly one element
定期分享我的发现和想法，感谢你的陪伴和支持
07-03 1801
封面图内含彩蛋 ~ 原因： Vue2要求模板中的``中只能有一个根元素，也就是说最外层不能同时包含其他元素或者文本。如果模板中出现多个根元素，就会触发这个错误。 解决： vue2：所以，删除多的根元素，or在最外层再加一个div包裹其他根元素 vue3中，则去掉了这个限制。引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 4371
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
The template root requires exactly one element vue/no-multiple-template-root
weixin_64652648的博客
09-06 1404
当你在使用element的过程中出现了这个错误就代表<template></template>内出现了一个或几个<div></div>,且没有一个div将template内的代码全部包括起来，这个时候只需要加上一个div就可以解决这个问题。
vue3 工程中 vscode报错 The template root requires exactly one element . eslint-plugin-vue 应该怎么解决
最新发布
08-28
我们面对的问题是在Vue3工程中，VS Code报错“The template root requires exactly one element. eslint-plugin-vue”。这个错误是因为Vue的模板要求只有一个根元素，而我们的模板可能有多个根元素，违反了Vue3单根...
The template root requires exactly one element.报错怎么解决
07-14
"The template root requires exactly one element"是一个错误提示，表示模板的根元素应该只有一个。 要解决这个问题，你需要检查你的模板文件，确保根元素只有一个。通常来说，模板文件应该像这样： ```html ...
[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模板中使用了多个根节点导致的。解决这个问题的...
vue error:The template root requires exactly one element.
weixin_39037804的博客
08-11 472
error:[vue/valid-template-root] The template root requires exactly one element. 原因： 因为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/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue
乐辞的博客
03-31 6835
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue Vue3.0 脚手架报错 [vue/no-multiple-template-root] The template root requires exactly one element. eslint-plugin-vue 有道翻译： [vue/no-multiple-template-root]模板根需要一个元素。
VUE报错：The template root requires exactly one element.
sun_luming的博客
06-04 3109
今天在写VUE组件时碰到一个错误：The template root requires exactly one element. 如下图： VUE的模板里有且只能有一个根节点，这里我放了两个el-date-picker元素，所以就报了这个错误，搞个div，把他们两个都放到div里就好了。 也就是在template标签中只能有一个根元素，所以我们可以弄一个div，把这个组建中需要的所有元素都放进这个div中就不会报这个错了。 ...
【前端】vue 报错The template root requires exactly one element
m0_74825565的博客
12-11 1824
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。并不是一个真实的 HTML 元素，它仅在 Vue 的模板编译过程中有效，用于指示 Vue 不需要添加额外的包裹元素）。总之，检查你的 Vue 组件模板，确保它有一个单一的根元素来包裹所有的子元素。Vue 要求每个组件的模板必须有一个单一的根元素，这是为了保持组件结构的清晰和可预测性。
Vue报错 The template root requires exactly one element
TOP的博客
01-07 2753
Vue报错 The template root requires exactly one element. Vue2解决 因为vue的模版中只能有一个根节点，由于不支持多根节点组件，所以在<template>中插入第二个元素就会报错，将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了 Vue3解决 在 3.x 中，组件可以包含多个根节点！但是为什么还会报错呢 是因为插件vetur设置了校验规则，改一下配置规则就不会显现错误了
Vue3项目Eslint提示 the template root requires exactly one element
Jimmy的前端博客
11-05 1万+
问题如下描述： 在创建了vue3.0的项目时发现，.vue文件的写法是按照vue3.0的来的，但是eslint还是会报错，提示： the template root requires exactly one element 产生原因： Vue3.0以前版本在template标签下只允许有一个标签 ...
The template root requires exactly one element.
Within的博客
05-15 470
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.eslint-plugin-vue
EchoLiner的博客
04-28 2580
The template root requires exactly one element.eslint-plugin-vue
vue3 The template root requires exactly one element
tscn1的博客
03-13 577
vscode中vue3编写template中多个根标签报错的解决方法 vue3中支持template中写两个，但是插件vetur设置了校验规则，改一下配置规则就不会显现错误了 具体操作如下图，点击配置扩展设置，划到最下面，找到vetur>validation:Template关掉即可 ...
评论
成就一亿技术人!
拼手气红包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、付费专栏及课程。

余额充值