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. If you are using v-if on multiple elements, use v-else-if to chain them instead.

代码如下:
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form> <el-tabs v-model="Page" type="border-card" @tab-click="handleClick">
<el-tab-pane label="标签1" name="first">
</el-tab-pane>
<el-tab-pane label="标签2" name="second">
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
cargoPage: 'first',
form: {
name: '123', }
};
},
methods: {
handleClick(tab, event) {
}
}
};
</script>
解决:
加一个<template>后加一个<div></div> 标签,问题解决
<template>
<div>
<el-form ······
<el-tabs ······
</div>
<template>
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. If you are using v-if on multiple elements, use v-else-if to chain them instead 解决办法
Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...
- 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文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...
- Vue脚手架报错 Component name "Student" should always be multi-word vue/multi-word-component-names
报错信息分析: 新手在第一个次使用脚手架的时候难免会遇到各种各样奇怪的问题,最近在学习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的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.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模板只能有一个跟对象 我是这样写的 最后修改为 就可以正常运行了
- vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i
转自:https://blog.csdn.net/yangyiboshigou/article/details/72084619
- 【错误总结】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.
大致意思是因为模板里面应该包含一个根元素,使用组件的时候应该用div或p标签包起来
- 【转】Vue项目报错:Uncaught SyntaxError: Unexpected token <
这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给 ...
- Vue.js报错Failed to resolve filter问题原因
Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
随机推荐
- servlet中ServletContainerInitializer的简单说明
根据官方文档到的说明 public interface ServletContainerInitializer Interface which allows a library/runtime to ...
- PHP替代session的方法
PHP替代session的方法 服务器集群的时候 会发现session的问题 一般采用redis 来代替 用账号作为key 因为redis能主从 所以打算用替代session的方法1 cookie代替 ...
- 探索安卓热修复框架AndFix的奥秘
虽然阿里的AndFix框架已经出来很长时间了,但是还不了解它的同学依然挺多,接下来就跟着我一起来到AndFix的世界里一起看看,如何达到不用重新安装app就可以修复bug. 1.什么是AndFix? ...
- Suspended Animation——《The Economist》阅读积累(考研英语二·2010 Reading Text 1)
[知识小百科] Damien Hirst(达米恩●赫斯特):生于1965年,是新一代英国艺术家的主要代表人物之一.他主导了90年代英国艺术发展并享有很高的国际声誉.赫斯特在1986年9月就读于伦敦大学 ...
- Java 非访问修饰符
除了访问性修饰符,我们还有非访问性修饰符.这里主要说明static与final修饰符,其他修饰符以后用到再说. 一.static修饰符 static修饰符是用来修饰方法与变量. 1.创建StaticT ...
- hexo 个人博客搭建
Hexo 小插曲介绍 虽然标题是第一次写博客. 但是我这个困难户至少挣扎了1年多了, 一直下不去手.今天可算是开了个头. 贵在坚持吧 抽时间介绍我的hexo安装历程吧,今天实在是有点困了,要睡觉了. ...
- python爬取盘搜的有效链接
因为盘搜搜索出来的链接有很多已经失效了,影响找数据的效率,因此想到了用爬虫来过滤出有效的链接,顺便练练手~ 这是本次爬取的目标网址http://www.pansou.com,首先先搜索个python, ...
- oracle-3-Linux-11g安装-图形安装
在安装系统时就安装了图形桌面 参考博客地址:https://www.cnblogs.com/tibit/p/6134150.html 未参考,只是感觉不错:https://blog.csdn.net/ ...
- k8s部署nacos
如果是在centos7上直接启动nacos 注意修改启动命令 sh startup.sh -m standalone 访问路径 http://********:8848/nacos/index.h ...
- 使用postman mock server
需要写一个小的Java程序,用来调用云平台的接口 由于云平台的接口程序还没有写好,只能用模拟的方式先行开发代码, 用了post来模拟接口程序. 需要模拟的接口如下: ■请求地址 /openapi/ip ...