zoukankan      html  css  js  c++  java
  • 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>
    
    
  • 相关阅读:
    vue cli 3.0安装、项目创建
    Vue-详解设置路由导航的两种方法
    VUE项目启动流程
    vue项目创建
    前端UI优秀框架
    Spring MVC返回JSON的几种方法
    Cookie 和 Session 的区别
    Object.defineProperty()
    vuex getter传入参数
    后台管理系统权限控制的思路
  • 原文地址:https://www.cnblogs.com/whycai/p/11445455.html
Copyright © 2011-2022 走看看