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写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
随机推荐
- thinkphp5 笔记 模型调用
模型 useapp\index\model\Article as ArticleModel; //静态调用更新 $Article= ArticleModel::); $Article->name ...
- 关于Form、ModelForm的一些操作(持续更新)
1.前端循环:后端传到前端的form是可以循环的,以此获得想要展示的元素 <form method="post" class="form-horizontal&qu ...
- Mac下安装VirtualBox并在VirtualBox中安装CentOS7
VirtualBox (百科)VirtualBox 是一款开源虚拟机软件.VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司Sun Microsystem ...
- Python标准库: functools (cmp_to_key, lru_cache, total_ordering, partial, partialmethod, reduce, singledispatch, update_wrapper, wraps)
functools模块处理的对象都是其他的函数,任何可调用对象都可以被视为用于此模块的函数. 1. functools.cmp_to_key(func) 因为Python3不支持比较函数,cmp_to ...
- 任务调度之Quartz.Net基础
最近公司要求将之前的系统设计文档补上,于是大家就都被分配了不同的任务,紧锣密鼓的写起了文档来.发现之前项目中使用了Quartz.Net来做一些定时任务的调度,比如定时的删除未支付的订单,定时检查支付状 ...
- DEFAULT CURRENT_TIMESTAMP
alter table t_user_channel_info change update_dttm update_dttm timestamp NOT NULL DEFAULT CURRENT_TI ...
- ASP.NET Core利用拦截器 IActionFilter实现权限控制
“麦荻网教系统”采用了前后端代码分离的架构,即“Miidy.Cloud.Console”站与“Miidy.Cloud.Manage”站(两个前端站)同时通过web api的方式调用“Miidy.Clo ...
- 读取经纬度坐标并存储为字典格式,即key为ID,value为轨迹点
示例数据: #格式为txt文本 ID,L,B 001,116.5154,45.1154 001,116.5160,45.1153 ... 002,xxx,xxx ... 目标:建立轨迹数据结构,即di ...
- mybatis - 问题记录
记录使用 mybatis 过程中遇到的一些报错,及原因以及解决方法. 1. 报错: Could not find parameter map com.lx.mapper.HotelMapper.map ...
- http://go.microsoft.com/fwlink/?linkid问题
今天不知怎的,打开一个网页出现了http://go.microsoft.com/fwlink/?linkid=XXX 烦死了,在百度搜了下方法,什么改注册表,策略模板等不见起效.其实打开IE的设置, ...