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写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
随机推荐
- Django时区导致的datetime时间比较报错
我们使用python 的datetime模块比较Django数据库Datetime字段的时候,可能会出现报错: TypeError: can't compare offset-naive and of ...
- UN Report: Last 10 Years Likely the Hottest Decade on Record——VOA慢速英语
听力地址:UN Report: Last 10 Years Likely the Hottest Decade on Record 中英对照:联合国报告称过去十年可能是有记录以来最热的十年 Words ...
- js里typeof和instanceof和箭头表达式要注意的地方,以及其他
如果学过类似C#这样的语言,然后定义两个类class Mu{}和class Ku{},那么显然typeof Mu != typeof Ku的,但是在js里则不是这样,对于Mu和Ku的对象进行typeo ...
- 哈希--Hash,“散列”/“哈希”
哈希 Hash,翻译“散列”,音译为“哈希”,把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是散列值的空间通常远小于输入的空间,不同的输入可能会散 ...
- 032 Android Service
1.介绍 2.新建Service (1) (2)在Androidmanifest.xml文件中配置service <service android:name=".Myservice&q ...
- C 语言函数手册:涵盖字符测试、字符串操作、内存管理、时间换算、数学计算、文件操作、进程管理、文件权限控制、信号处理、接口处理、环境变量、终端控制
1. 字符测试函数 函数 说明 isascii() 判断字符是否为ASCII码字符 2. 字符串操作 函数 说明 gcvt() 将浮点型数转换为字符串(四舍五入) index() 查找字符串并返回首次 ...
- Tomcat HTTP connector和AJP connector
Tomcat服务器通过Connector连接器组件与客户程序建立连接,“连接器”表示接收请求并返回响应的端点.即Connector组件负责接收客户的请求,以及把Tomcat服务器的响应结果发送给客户. ...
- 调用WebService时加入身份验证,以拒绝未授权的访问
众所周知,WebService是为企业需求提供的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务.但在有些时候的某些应用服务不希望被未授权访问,那么此时我们可以一下几种 ...
- C# 、子窗体调用父窗体属性、方法
namespace Test { public partial class FrmMain : Form { public FrmMain() { InitializeComponent(); } p ...
- Android NDK 学习之Android.mk
Android.mk file syntax specification Introduction: This document describes the syntax of Android.mk ...