【uni-app 编译报错 Errors compiling template:Component template should contain exactly one root element】

于 2022-08-28 20:22:23 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： uni-app 文章标签： uni-app 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oDJMoney/article/details/126573652
版权

uni-app模板报错 Errors compiling template: Component template should contain exactly one root element

1、编译报错

使用Hbuilder 编译直接报错 错误原因分析：一般是不了解uni-app前端样式结构造成的；如果两对div并列，则需要在外边多加一对div来将其包围。也就是说，外面必须包裹一层div，里面随便你怎么写，写几个div都行；（view也是同理）

2、错误示例

最外层没有div包裹，编译报错

3、正确示例

最外层有div包裹，正确编译

DJMoney
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HBuilder编译uniapp 报错Module Error ：Errors compiling template:（最终根本原因）
m0_73034508的博客
09-06 2422
uni-app报错Module Error ：Errors compiling template： 注意：（在uniapp中必须有一个view,且只能有一个根view;所有内容写在这个view下面）
my-rails-app-template:我的 Rails 应用模板
07-01
补充发展的宝石：vendorer，撬，better_errors，binding_of_caller和quiet_assets 用于创建Vendorfile 的 vendorer init 和初始提交 BDD （可选） rspec-rails宝石 用于更换夹具的制造宝石 simple_form gem（可...
Error compiling template: Component template should contain exactly one root element. If you are usi
weixin_43974311的博客
08-05 961
Error compiling 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 错误编译模板: 组件模板应该恰好包含一个根元素。如果在多个元素上使用v-if，则使用v-else-if将它们链接起来 加上这个div标签就好了，原因是：template标签只能包
[Vue warn]: Error compiling template: Component template should contain exactly one root element.
会写bug的小邓程序员的博客
06-29 810
Vue报错：[Vue warn]: Error compiling 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. 错误原因：template里面只能一个根元素下面这种是正确的 给出错误示例： 这种也是正确的。只能包含一个根元素...
Vue 使用run ** 命令运行报错Errors compiling template
build2024
09-24 420
错误一: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 解决办法 1.如图: 2.错误原因 其实就是说在模版里只能有一个主div（根对象），如果有多个元素，请用一个主div包含他们 3.错误代码 4.修改后的代码 5.编译就通...
[vue warn]: Error compiling template 模板编译错误
墨水白云的博客
05-18 1万+
模板编译错误：这种错误的产生往往在于对vue语法的使用错误问题。 这里产生的原因：vue中双{{}}的使用一般放置在元素的标签之间当作内容变量使用，可以理解为放置在标签之间。 例： <input type="text" :value="mycode.code"/>{{mycode.code}} , // 绑定属性的语法v-bind(: ) 而本错误为将双大括号放置在了元素标签的属性中。 即：<input type="text" value="{{mycode.code}}"/>这样.
解决’ Error compiling template‘问题
qq_44196374的博客
02-26 2万+
报错截图 原因:标签没写正确，缺少标签或者标签多了，如对应的标签没有闭合。 解决方法：找到未闭合或者多余的标签，然后补全或者删掉。 我的报错的原因是少写了一个闭合标签div补上去就没报错啦 ...
type-errors-pretty：:lipstick::lady_beetle:组合器，可轻松编写漂亮的类型错误
02-04
type-errors-pretty：:lipstick::lady_beetle:组合器，可轻松编写漂亮的类型错误
japi-errors::high_voltage:RESTful和HTTP服务的可自定义错误
05-26
安装Gradlecompile ' io.github.cdimascio:japi-errors:1.3.1 ' 玛文< dependency> < groupId>io.github.cdimascio</ groupId> < artifactId>japi-errors</ artifactId> < version>1.3.1</ version></ dependency>...
详解webpack的clean-webpack-plugin插件报错
01-18
1、出错代码 const path = require('path') const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { ...
ajv-errors:Ajv验证程序的JSON模式中的自定义错误消息
04-29
ajv-errors v3支持 。 如果您使用的是ajv v6，则应使用 内容 支持者，企业支持，安全联系人 执照 安装 npm install ajv-errors 用法 将关键字errorMessages添加到Ajv实例： const Ajv = require ( "ajv" ) . ...
Error compiling template: Component template should contain exactly one root element
qq_47701723的博客
08-28 512
组件的模板应该只能包含一个根元素，也就是是说作为元素的直系儿子的元素只能有一个 解决办法发是将template的子元素用一个包裹起来
Error compiling template: Component template should contain exactly one root
ClearLoveQ的博客
05-27 1520
组件的模板<template>应该只能包含一个根元素，也就是是说作为元素<template>的直系儿子的元素只能有一个 解决办法发是将template的子元素用一个div包裹起来 ...
Errors compiling template: Cannot use v-for on stateful component root element because it renders mu
weixin_42220130的博客
04-12 647
解决方法：在元素外面再套一个元素包裹住（因为template里面第一个view是模板作用） 包裹前 包裹后 <template> <view> <view class="questionDetail" v-for="(item,index) in detail" :key="index" > <text class="questionDetail-title">标题</text>
Component template should contain exactly one root element. If you are using v-if on multiple eleme
sunmeng_sunmeng的博客
10-27 180
Errors compiling 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. 所以说就是在template中没有用一个根组件，解决方法 就是 ...
Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to
dw将限制条件全部检测通过后才能提交表单
12-01 1843
Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the ui. Avoid placing tags… 原因是你新建VUE实例的代码放在了被绑定的组件/标签. 我好像在
Vue报错汇总
李振恒
01-04 222
错误一 vue.js:634 [Vue warn]: Error compiling 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中报错： Component template should contain exactly one root element
热门推荐
感恩、奋进、自信
05-05 2万+
在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报错的大致意思是：组件的模板&lt;template&gt;应该只能包含一个根元素，也就是是说作为元素...
关于控制台弹出 Errors compiling template: 15:10:28.831 Component template should contain exactly one root
IT_CRH的博客
03-18 132
关于Vue： Errors compiling template: 15:10:28.831 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. 的个人纠错 问题 Errors compiling template: 15:10:28.831 Component templ
Errors compiling 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.
最新发布
06-03
这个错误是Vue.js编译器报出来的，它意味着在组件的模板中存在多个根元素，而Vue.js要求每个组件模板只能有一个根元素。这个错误通常是由以下几个原因造成的： 1. 缺少根元素：模板中缺少根元素，或者存在多个根元素。 2. 使用了v-if指令：在模板中使用了v-if指令，并且v-if指令作用于多个元素。 为了解决这个问题，你可以尝试以下几个方法： 1. 在组件模板中添加一个根元素，将所有其他元素包含在这个根元素内。 2. 如果你使用了v-if指令，可以使用v-else-if或v-else指令来代替v-if指令，将多个元素链式连接起来。 3. 如果你的组件模板比较复杂，可以将其拆分成多个子模板，并使用Vue.js提供的组件通信机制来进行组合。 希望这些方法能够帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值