VUE编译报错
原创
©著作权归作者所有:来自51CTO博客作者菜小鱼鱼的原创作品,请联系作者获取转载授权,否则将追究法律责任
背景:
在使用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编译报错_编译报错](https://s2.51cto.com/images/blog/202208/11175118_62f4d1161afcd92125.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
代码如下:
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>