背景:

在使用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. C#、.NET、ASP.NET之间的关系

    一.前言 这是个人的笔记,在博客园已经有不少大佬已经写过了.但我自己就想留点笔记在属于我自己的博客.所以大佬忽略就行,不喜勿碰.谢谢!!! 二.个人笔记 C# 全称(C sharp),它是微软公司发布 ...

  2. Jira 自定义工作流并设置触发器

    一.添加修改工作流 打开 设置--问题--工作流 复制一个工作流,然后进去编辑页面 添加状态 增加转换动作 切换到文本,设置跳转过程中的事件 针对Stop Progress事件,修改跳转界面(界面需先 ...

  3. 软件素材---linux C语言:向文件末尾进行追加数据

    void AppendDataToFile(char* filePath, char* msg) { // 以附加方式打开可读/写的文件, 如果没有此文件则会进行创建,然后以附加方式打开可读/写的文件 ...

  4. [.Net Core] - 当 .Net Core 版本由 1.x 升级至 2.x 后,Cookie 使用方式变更

    背景 Asp.Net Core 项目升级至 2.x 版本后,Cookie 验证方式需要进行更新. 升级前:.Net Core 1.x Startup.cs public void Configure( ...

  5. session和cookie有什么区别?

    1.存储位置不同 cookie的数据信息存放在客户端浏览器上. session的数据信息存放在服务器上. 2.存储容量不同 单个cookie保存的数据<=4KB,一个站点最多保存20个Cooki ...

  6. 正确使用SQLCipher来加密Android数据库

    Android本身自带有不加密的数据库SQLite,如果要保存密码之类的敏感数据在本地的话方法一是使用字段加密解密算法,方法二是整个数据库都加密掉.如果只是加密解密某个字段(如password)就推荐 ...

  7. VS.NET(C#)--1.4项目与解决方案

    项目与解决方案 项目 除创建网站,VS2005可创建项目.然后把项目放入解决方案中.VS2005可编译很多类型项目,分别是: 1.Windows应用程序 --在用戶计算机上运行的客户端应用程序,可显示 ...

  8. 多进程,多线程,使用sqlalchemy 创建引擎(单例模式),闭包装饰器承载数据库会话,装饰模型类的类方法

    python 多进程,多线程,使用 sqlalchemy 对数据库进行操作 创建引擎 & 获取数据库会话: 使用类的方式,然后在对象方法中去创建数据库引擎(使用单例,确保只创建一个对象,方法里 ...

  9. ubuntu安装之后需要做什么

    安装完ubuntu或者linux后应该做什么?首先在你安装完之后,都知道,很多系统都是有自带的一些软件之类,很多其实是不必要的,我们可以完全删掉,需要的时候再重装,那么安装完之后应该做什么呢? 1.智 ...

  10. OSI协议与TCP\IP协议之间的关系

    OSI协议 TCP\IP协议 五层协议(学习参考) 应用层 应用层 应用层 表示层 会话层 运输层 运输层 运输层 网络层 网络层 网络层 数据链路层 网络接口层 数据链路层 物理层 物理层 基于五层 ...