背景:

在使用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的更多相关文章

  1. 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 ...

  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.

    在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...

  3. Vue脚手架报错 Component name "Student" should always be multi-word vue/multi-word-component-names

    报错信息分析: 新手在第一个次使用脚手架的时候难免会遇到各种各样奇怪的问题,最近在学习Vue的过程中就出现了如下问题 通过阅读报错信息可知: 是我们的组件名有一些问题,(报错信息翻译过来大概就是组件名 ...

  4. 组件嵌套时报: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组件的 ...

  5. 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模板只能有一个跟对象 我是这样写的 最后修改为 就可以正常运行了

  6. vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i

    转自:https://blog.csdn.net/yangyiboshigou/article/details/72084619

  7. 【错误总结】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标签包起来

  8. 【转】Vue项目报错:Uncaught SyntaxError: Unexpected token <

    这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给 ...

  9. Vue.js报错Failed to resolve filter问题原因

    Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...

随机推荐

  1. 使用Lombok总结

    Lombok学习总结 Project Lombok is a java library that automatically plugs into your editor and build tool ...

  2. C++中的const的简单用法

    一.符号常量的声明 常量声明的语句的形式: const +  数据类型说明符 + 常量名 =  常量值     数据类型说明符  + const + 常量名 =  常量值       注意: 符号常量 ...

  3. noip2019集训测试赛(二十一)Problem B: 红蓝树

    noip2019集训测试赛(二十一)Problem B: 红蓝树 Description 有一棵N个点,顶点标号为1到N的树.N−1条边中的第i条边连接顶点ai和bi.每条边在初始时被染成蓝色.高桥君 ...

  4. 简单的鼠标操作<一个填充格子的小游戏>

    #include "graphics.h" #include "conio.h" void main(){ // 初始化界面 initgraph(, ); ; ...

  5. ASP.Net Core 返回的json数据,自定义日期格式

    //代码位置:Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddMvc() .Ad ...

  6. Docker 学习笔记(四):问题日志

    一.Docker-Compose 容器组开机重启失败 Docker-Compose 的 depends_on 参数在 docker 中没有对应. 重启电脑后,容器的重启过程只由 docker 控制,而 ...

  7. (转)高效线程池之无锁化实现(Linux C)

    本文链接:https://blog.csdn.net/xhjcehust/article/details/45844901 笔者之前照着通用写法练手写过一个小的线程池版本,最近几天复习了一下,发现大多 ...

  8. [BZOJ3681]Arietta(可持久化线段树合并优化建图+网络流)

    暴力建图显然就是S->i连1,i->j'连inf(i为第j个力度能弹出的音符),j'->T连T[j]. 由于是“某棵子树中权值在某区间内的所有点”都向某个力度连边,于是线段树优化建图 ...

  9. C#数字日期转成中文日期

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  10. 五、eureka客户端自动配置

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 前面的几篇文章中,我们从eureka Server端的角度看了看eureka的几个核心要 ...