备案控制台
开发者社区 开发与运维 文章 正文

成功解决Component template should contain exactly one root element

2023-08-29 61
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 成功解决Component template should contain exactly one root element

前言

报错信息：

VUE小白会碰到这样的错误，刚上手，对vue还不太熟悉，所以对里面的构造方式不太清楚。

对于这个bug，我们很容易翻译为：

组件模板应该只包含一个根元素

查看代码

如图所示，template下面包含了两个

根节点，这是报错的根本原因。

解决

在最外层写一个div，把所有的前端代码放进去就好了：

OK, GAME OVER


文章标签：
JavaScript
前端开发
前方一片光明
目录
相关文章
JavaPub
|
14天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
JavaPub
31 1
刻刻帝的海角
|
23天前
Each child in a list should have a unique “key“ prop. Check the render method的报错解决
Each child in a list should have a unique “key“ prop. Check the render method的报错解决
刻刻帝的海角
49 1
coypdkduljqgk
Vue3报错：Extraneous non-props attributes (style) were passed to component but could not be automatical
Vue3报错：Extraneous non-props attributes (style) were passed to component but could not be automatical
coypdkduljqgk
2390 1
极客李华
|
1月前
|
JavaScript
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
极客李华
140 0
风水道人
|
1月前
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
风水道人
36 2
jcLee95
|
1月前
|
JavaScript 前端开发
[Vue Router warn]: Component “default“ in record with path “/xx“ is a function that does not return
[Vue Router warn]: Component “default“ in record with path “/xx“ is a function that does not return
jcLee95
364 0
bug天选之子
|
11月前
Unknown custom element: ＜add-employee＞ - did you register the component correctly? For red cursive c
原因： 1.组件名没写对(导入和注册不对应) 2.components少写了个s 3.组件命名最好是驼峰命名 4.导入时语法错误 5.代码中有两个components，后一个的值把前一个覆盖了 6.组件直接循环套用了
bug天选之子
66 0
鋜斗
|
1月前
|
前端开发 开发者
TS7031: Binding element ‘role‘ implicitly has an ‘any‘ type.
TS7031: Binding element ‘role‘ implicitly has an ‘any‘ type.
鋜斗
64 1
王同学睡醒了
|
1月前
|
JavaScript
【Vue Error】 error Component name “product“ should always be multi-word vue/multi-word-compone……
【Vue Error】 error Component name “product“ should always be multi-word vue/multi-word-compone……
王同学睡醒了
45 0
王同学睡醒了
|
1月前
|
JavaScript
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the
王同学睡醒了
79 0