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

已于 2022-06-28 20:40:06 修改
阅读量7.6w 收藏 63
点赞数 79
分类专栏： # Vue系列 文章标签： Component template should cont
于 2019-07-18 21:21:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26230421/article/details/96426823
版权

前言

报错信息：

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

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

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

查看代码

如图所示，template下面包含了两个<div>根节点，这是报错的根本原因。

解决

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

OK, GAME OVER

更多精彩内容请关注：程序员高手之路

回复“vue项目”，免费获取以下项目视频教程

前方一片光明
关注
专栏目录
Component template should contain exactly one root element.
small_shadow的博客
01-26 227
vue组件化开发遇到的问题，问题描述： (Emitted value instead of an instance of Error) Error compiling template: <MainHeader/> <MainSearch/> - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-
uniapp 报错 “Component template should contain exactly one root element.“解决方案
sspu_admin
08-03 2132
uniapp 引入自定义组件的时候报错 报错信息：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. <template> <view> <z-comm :commodity="commodity"></z-comm> &l
Component template should contain exactly one root element......
Locker的博客
06-13 7837
报错信息： 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. 翻译：
【前端】vue 报错:The template root requires exactly one element
最新发布
程序员-张师傅
07-25 1809
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
Component template should contain exactly one root element
Java&Develop的博客
07-27 4065
Component template should contain exactly one root element
【Vue2】Component template should contain exactly one root element.
HEX9CF的技术博客
12-19 1236
这个错误通常是由于 Vue 组件的模板中包含多个根元素导致的。Vue 要求组件模板中只能有一个根元素，如果需要渲染多个元素，可以使用。元素将它们包裹起来，或者使用 v-else-if 来链式渲染多个元素。你可以通过将模板内容用单个根元素包裹起来来解决这个问题。元素中，以确保只有一个根元素。将整个模板内容包裹在了一个。
Component template should contain exactly one root element. If you are using v-if on multiple eleme
weixin_48123820的博客
05-16 3388
报错的大致意思是：组件的模板<template>应该只能包含一个根元素，也就是是说作为元素<template>的直系儿子的元素只能有一个。
vue报错：Component template should contain exactly one root element. If you are using v-if on.....
qq_41261490的博客
07-29 1197
今天在写项目的时候遇到的问题： 代码如下： <template> <div class = "a">{{time}}</div> <test-component></test-component> </template> 报错如下： 意思是说：组件模板应只包含一个根元素。如果在多个元素上使用v...
Component template should contain exactly one root element. If you are using v-if on multiple elements
04-07
解决这个问题的方法有两种： 1. 使用一个包裹元素：将需要使用v-if指令的多个元素包裹在一个父元素中，确保只有一个根元素。例如： ``` <template> <div v-if="condition1">Element 1 <div v-if="condition2">...
VUE出现“Component template should contain exactly one root element. If you are using v-if on multiple
weixin_53658416的博客
04-03 895
VUE出现"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."错误的解决方法。
vue报错：Component template should contain exactly one root element.
奔跑的小猪仔
05-21 734
在外面套一层divd像上面图中那样
【前端：vue项目报错】Component template should contain exactly one root element.
编程学习集装箱
08-22 323
问题 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. 原因 template只能有一个根元素。 解决 将template中的多个根元素，用div嵌套起来。 <template> <div> <h1>个人信息</h1&
【Vue】Component template should contain exactly one root element.
hoiyaku
07-14 3324
问题： 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. 模板语法错误组件模板应该正好包含一个根元素，如果你使用的是v-if多元素，使用v-else-if链他...
vue2.5.16 模板只支持一个控件Component template should contain exactly one root element.
cominglately的博客
05-09 715
场景 . 在写组件template的时候遇到 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. 分析 . 翻译一下就是vue template只可以包...
Component template should contain exactly one root element. If you are using v-if on multiple elemen
07-08 1105
There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.
【异常处理】Vue报错 Component template should contain exactly one root element.
weiambt的博客
03-06 1013
查看vue代码，发现template中有两个元素，所以报错。翻译为：组件模板应该只包含一个根元素。将h1标签放到div里面即可。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前方一片光明

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

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

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

打赏作者

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

抵扣说明：

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

余额充值