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.

代码如下:

 1 <template>
 2 <el-form ref="form" :model="form" label-width="80px">
 3   <el-form-item label="活动名称" required>
 4     <el-input v-model="form.name"></el-input>
 5   </el-form-item>
 6 </el-form>
 7 
 8     <el-tabs v-model="Page" type="border-card" @tab-click="handleClick">
 9         <el-tab-pane label="标签1" name="first">
10         </el-tab-pane>
11         <el-tab-pane label="标签2" name="second">
12         </el-tab-pane>
13    </el-tabs>
14 </template>
15 <script>
16   export default {
17     data() {
18       return {
19         cargoPage: 'first',
20 form: {
21           name: '123',
22       
23         }
24       };
25     },
26     methods: {
27       handleClick(tab, event) {
28       }
29     }
30   };
31 </script>

解决:

加一个<template>后加一个<div></div> 标签,问题解决

1 <template>
2 <div>
3 <el-form ······
4 <el-tabs ······
5 </div>
6 <template>

原文地址:https://www.cnblogs.com/whycai/p/11445455.html